> 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>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://prizmds.gitbook.io/documentation/components/dialogs/sidebar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.