> For the complete documentation index, see [llms.txt](https://prizmds.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://prizmds.gitbook.io/documentation/components/dialogs/sidebar.md).

# Sidebar

## <mark style="color:blue;">Общая информация</mark>

SideBar (разновидность Dinamic Dialog) - двусторонний диалог с пользователем (окна включают формы, списки, ссылки и другие управляющие элементы, с которыми пользователь может взаимодействовать). Формат “выезжания” слева / справа / снизу / сверху позволяет пользователю оставаться в контексте основной страницы.

## <mark style="color:blue;">Анатомия</mark>

<figure><img src="/files/ZAjASP3HUFhKVtzhG6ir" alt="" width="375"><figcaption></figcaption></figure>

1. Заголовок. Краткое описание контента или суть процесса. Опционально может содержать подпись.
2. Контентная область. Содержит информацию и/или элементы управления, необходимые для выполнения задачи окна (такие как текст, таблица, поля ввода и прочие элементы).
3. Блок кнопок (footer). Содержит основные действия, необходимые для завершения или отмены задачи окна.
4. Кнопка закрытия (Х). Закрывает модальное окно без сохранения введенной информации. В большинстве случаев опциональна.

## <mark style="color:blue;">Описание работы</mark>

SideBar может быть как модальным так и немодальным.

### Модальные окна

Контент страницы недоступен, пока пользователь не совершил какое-либо действие со всплывающим окном. При появлении модального окна обязательно появление лайтбокса (затемнение основного контента страницы).

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Приложение на платформе</strong></td><td><ul><li>Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений</li><li>Выравнивание всплывающего окна - относительно окна приложения</li></ul></td><td><a href="/files/kon93BjJxQhbKSmivsrw">/files/kon93BjJxQhbKSmivsrw</a></td></tr><tr><td><strong>Неплатформенное решение</strong></td><td><ul><li>Лайтбокс перекрывает основной интерфейс </li><li>Выравнивание всплывающего окна - относительно основого интерфейса</li></ul></td><td><a href="/files/RVA9e6UFjR2H01bIr2G3">/files/RVA9e6UFjR2H01bIr2G3</a></td></tr></tbody></table>

### Немодальные окна

Пользователь может взаимодействовать с контентом страницы (нажимать на кнопки и переходить по ссылкам) при открытом всплывающем окне. При появлении немодального окна лайтбокс не появляется.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Приложение на платформе</strong></td><td><ul><li>Лайтбокс не перекрывает артефакты платформы - шапку и меню приложений</li><li>Выравнивание всплывающего окна - относительно окна приложения</li></ul></td><td><a href="/files/pQ67LD1YUXG0TBYAcEaA">/files/pQ67LD1YUXG0TBYAcEaA</a></td></tr><tr><td><strong>Неплатформенное решение</strong></td><td><ul><li>Лайтбокс перекрывает основной интерфейс</li><li>Выравнивание всплывающего окна - относительно основного интерфейса</li></ul></td><td><a href="/files/mOhHknpWsZ5UX67AiwYk">/files/mOhHknpWsZ5UX67AiwYk</a></td></tr></tbody></table>

### Закрытие

Закрытие SideBar может происходить:

* Кнопками действия
* Кнопкой закрытия (Х)\*
* Клавишей ESC\*

{% hint style="info" %}
могут быть отключены в случаях, когда без решения пользователя невозможно продолжить сценарий, в других ситуациях отключать способы отклонения модального окна не рекомендуется.
{% endhint %}

## <mark style="color:blue;">Оформление</mark>

### Кнопки

Максимальное количество кнопок в блоке - 4.

Старайтесь не применять большое количество стилей кнопок. Важность действия должна соответствовать оформлению кнопки.

В качестве текстовой метки используйте слова, описывающие действия. Например, «Добавить», «Удалить» и «Сохранить». Избегайте расплывчатых формулировок, таких как «Готово» или «ОК».

#### Отменить и закрыть (х)

В некоторых случаях различие между отменой и закрытием не имеет значения - нажатие кнопки X позволяет одновременно закрыть это модальное окно и, возможно, отменить любой процесс, который оно могло запустить.

Задача проектировщика:&#x20;

* определить, есть ли разница между отменой и закрытием
* предоставить пользователю четкие варианты.

Если разница между закрытием (Х) и Отменой все же есть, используйте следующие варианты (в зависимости от рещаемой задачи):

1. Откажитесь от кнопки закрытия (Х)
2. Используйте недвусмысленные текстовые метки (“Отменить расчет”, “Выйти без сохранения” и пр.)

Кнопка Отмены работает по принципу кнопки закрытия (Х) и закрывает окно без сохранения введенных данных.

#### Блок кнопок

В SideBar схема расположения кнопок горизонтальная.

В нашей дизайн-системе мы применяем единую схему горизонтального расположения кнопок, соответствующую Z-контенту.

<figure><img src="/files/w6H4nwOartn3nmML60Hj" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">Размеры</mark>

### Внешние размеры

Высота и ширина окна SideBar зависит от его расположения. 


Если SideBar расположен слева или справа, то его высота соответствует высоте окна приложения, а ширина не дожна превышать 50% от ширины экрана.&#x20;

Если SideBar расположен сверху или снизу, то его высота не должна превышать 60% от высоты экрана, а ширина соответствует ширине окна приложения.

#### Типографика

<table><thead><tr><th width="150">Элемент</th><th width="151">Название стиля</th><th>Гарнитура</th><th>Кегль</th><th>Начертание</th></tr></thead><tbody><tr><td>Заголовок</td><td>Static_title/h4</td><td>Inter</td><td>14px</td><td>Semi Bold</td></tr><tr><td>Текст</td><td>Main/Body-text 14</td><td>Inter</td><td>14px</td><td>Regular</td></tr></tbody></table>

### Внутренние размеры

Боковые паддинги во всех блоках - 16 рх

<figure><img src="/files/6wnzLnZrCkUj8xHtXZcI" alt=""><figcaption></figcaption></figure>

В блоке с контентом горизонтальные отступы - 16 рх

<figure><img src="/files/CLFB15y7jdnJLXMcVXFi" alt=""><figcaption></figcaption></figure>

Горизонтальные внешние паддинги в блоке с кнопками - 6 рх. \
Расстояние между кнопками - 8 рх

<figure><img src="/files/jcI4mUAy5KTnAyysMwl5" alt=""><figcaption></figcaption></figure>

### Расположение

SideBar может располагаться в 4 позициях относительно окна приложения (в случае, если приложение на Платформе Zyfra - шапка и меню приложений не учитываются):

* Left. Слева
* Right. Справа
* Top. Сверху
* Bottom. Снизу

Расположение окна зависит от решаемой задачи.

<figure><img src="/files/59a8iHqlvMja9PKtuUpD" alt="Left SideBar"><figcaption><p>Left SideBar</p></figcaption></figure>

<figure><img src="/files/qhWUpITP8JaQ235BLFCC" alt=""><figcaption><p>Right SideBar</p></figcaption></figure>

<figure><img src="/files/aDw8nwLaonsWootXaN9D" alt=""><figcaption><p>Top SideBar</p></figcaption></figure>

<figure><img src="/files/3rLCq4maV1ca7xBHyYfh" alt=""><figcaption><p>Bottom SideBar</p></figcaption></figure>