Сайдбар
Когда использовать
Сайдбар рекомендуется использовать в случае, если:
- Предполагается разместить небольшое количество полей;
- Необходимо быстро просмотреть сводную информацию, например из таблицы
Положение сайдбара
В 99% случаев сайдбар должен появляться справа. При появлении слева сайдбар перекроет область навигации и пользователю придется делать лишний клик, чтобы перейти на другой проект.
Сайдбар не должен перекрывать вкладки Рутового приложения, пользователь должен иметь возможность переклчиться на другую вкладку в любой момент, нельзя отнимать у него эту возможность.
Параметры описанные выше поддреживаются компонентом q-side-dialog по-умолчанию. Рекомендуется использовать его и не рекомендуется использовать компонент p-dialog.
Шапка сайдбара
Шапка содержит наименование сайдбара. Наименование пишется в формате “Добавление...”, “Редактирование...”.
Недопустимо оставлять шапку пустой, это сбивает пользователя, он может потеряться / забыть что он редактирует или просматривает.
Название сайдбара следует умещать в одну, максимум две строки. Старайтесь придумывать короткие и емкие названия, а лучше вообще обойдитесь чем-то вроде:
"Редактирование ИМЯ_РЕДАКТИРУЕМОГО_ОБЪЕКТА"
🔴 Плохо
🟢 Хорошо
Контентная часть
Сайдбар содержит поля ввода. Следите за тем, чтобы они располагались в смысловом порядке, например, цена и валюта всегда находятся рядом.
Ширина сайдбара составляет 320 px. Если поля содержат длинные наименования, то допустимо использовать сайдбар шириной 640 px.
Подвал сайдбара
Подвал сайдбара (или footer) отображает кнопки взаимодействия с формой или сайдбаром.
Если Вы находитесь в режиме редактирования, следует отобразить там кнопку "Действия" и "Отмена".
- Кнопка "Действие" - добавит / сохранит изменения, введенные в форму внутри сайдбара
- Кнопка "Отмена" - отменит изменения и закроет сайдбар
Важно отметить, что если форма имеет обязательные для заплнения поля, кнопка "Действие" должна иметь состояние
disabledдо тех пор, пока все поля в форме не будут валидны. Кнопка "Отмена" при этом доступна.
Разделитель
В сайдбарах допускается использовать разделитель (p-divider). Используйте разделитель, если вам необходимо сгруппировать поля по смыслу. Разделитель может содержать в себе заголовок.
Также роль разделителя может играть текстовый подзаголовок.
Аккордеон
В случаях, если сайдбар содержит много полей, которые
- Можно явно разделить на смысловые блоки;
- Не обязательно всегда держать перед глазами;
Cледует использовать аккордеон, внутри которого располагать поля ввода.
Использование чекбоксов, радиокнопок, переключателей
| Чекбоксы | Радиокнопки | Переключатели |
|---|---|---|
 |  |  |
| Чекбоксы используются в том случае, если нужно выделить несколько параметров. | Группа радиокнопок используется, если нужно выбрать один параметр из группы. Группа может быть как вертикальной, так и горизонтальной. | Переключатель используется для обозначения наличия/отсутствия какого либо признака. |
Просмотр / редактирование сайдбара
В текущем стандарте сайдбары добавления, просмотра и редактирования - это один и тот же сайдбар. В случае просмотра все поля должны быть в состоянии disabled или readonly.
| Редактирование | Просмотр |
|---|---|
 |  |