CSS Grid¶
ℹ️ Дизайнер доступен, начиная с версии 2.266 Дракон
Дизайнер CSS Grid используется для создания адаптивных и гибких портальных страниц (дашбордов) с разнородными виджетами, которые невозможно создать при использовании статичных сеток. Он решает ключевую проблему создания сложных, адаптивных порталов, где разные типы контента требуют разного поведения. В отличие от дизайнера Flex или статичных сеток в дизайнерах Dashboard и Board, CSS Grid позволяет комбинировать несколько стратегий в рамках одной страницы, обеспечивая единое отображение на любом экране от мобильного телефона до широкоформатного монитора.
Кнопки управления:
Кнопка Действие Добавление блока Сохранение портала Удаление выделенного блока из портальной страницы. Кнопка доступна, если в рабочей области мышью выделен блок Перемещение блока на уровень выше. Кнопка доступна, если в рабочей области мышью выделен блок Перемещение блока на уровень ниже. Кнопка доступна, если в рабочей области мышью выделен блок
Каждому блоку можно задать Наименование и выбрать его Тип: Виджет, Секция или Контейнер.
Настройка автоматического расположения элементов¶
По умолчанию для всех порталов установлено правило По строкам. Настройка доступна в виде выпадающего списка значений в левом блоке справа от кнопок управления.
С помощью нее для каждого портала можно индивидуально выбрать правило складывания элементов. Доступные значения: По строкам, По колонкам и По строкам и принудительное складывание.
Режимы заполнения пространства¶
Для настройки заполнения пространства портальной страницы используется опция-переключатель с вариантами По контенту или Пустотой. При выборе значения По контенту элементы сетки автоматически распределяются без пустых областей. При выборе Пустотой в сетке сохраняется пустое место до тех пор, пока не появится достаточно пространства для нового элемента. По умолчанию для всех порталов установлено правило По контенту.
Виджет¶
Это элементы с фиксированными, заданными размерами. Они не растягиваются и не деформируются. При изменении ширины экрана или добавлении новых элементов такие виджеты автоматически занимают место в плотной плиточной сетке и перемещаются на следующую строку, когда место в текущей заканчивается. Это поведение аналогично работе виджетов на домашнем экране смартфона или рабочем столе.
При выборе типа становятся доступны: поле для выбора конкретного виджета из системы и опция Размер. Виджет может быть только один.
Опция Размер определяет, сколько ячеек сетки занимает виджет. Доступные варианты и их набор зависят от типа виджета.
Шаблон — предустановленный размер из дизайна конкретного виджета. Доступен выбор только из тех комбинаций ширины и высоты, которые предусмотрены дизайном: размеры, нарушающие вёрстку виджета, в список не включаются. Это ускоряет наполнение портала и исключает ошибочные комбинации. Для виджетов, у которых шаблон не определён, этот вариант скрыт.
Во всю ширину — виджет занимает всю ширину сетки. Параметр «Начать с новой строки» при этом размере не применяется.
Кастом — произвольный размер. Допустимые значения колонок и строк: 2, 4, 6, 8, 12. Исключение: для виджета Баннер-кнопка в режиме Кастом дополнительно доступна высота 1 строка.
Доступность вариантов Размера зависит от типа виджета:
| Тип виджета | Доступные варианты | Доступные шаблоны (колонки × строки) | Шаблон по умолчанию |
|---|---|---|---|
| Кнопка тикер | Шаблон | 2×2, 4×2, 2×4, 4×4 | — |
| Баннер-кнопка | Шаблон | 1×2, 2×1, 2×2, 4×1, 4×2, 2×4, 4×4, 6×4, 4×6, 6×6 | Из настроек виджета ¹ |
| Календарь New | Шаблон | 2×2, 4×2, 4×4 | Из настроек виджета ² |
| Контакты | Шаблон | Из настроек виджета ³ | Из настроек виджета ³ |
| Счётчики | Шаблон | Из настроек виджета ⁴ | Из настроек виджета ⁴ |
| Список задач | Шаблон | 4×2, 4×4, 4×6, 6×4, 6×6 | 4×4 |
| Избранное | Шаблон | 4×2, 4×4, 4×6, 6×4, 6×6 | 4×4 |
| Новости | Шаблон, Кастом | 4×4, 6×6, 12×6, 12×8 | 12×8 |
| Лента социальной сети | Шаблон, Кастом | 4×6, 6×8, 6×12, 8×12 | — |
| Фильтр | Во всю ширину | — | — |
| Группа виджетов | Кастом, Во всю ширину | — | 4×4 |
| Все остальные | Кастом, Во всю ширину | — | 4×4 |
¹ Баннер-кнопка: шаблон по умолчанию определяется настройкой «Размер» в дополнительных настройках виджета — Малый (SM) → 2×2, Средний (MD) → 4×4, Большой (LG) → 6×6.
² Календарь New: шаблон по умолчанию определяется настройкой «Размер» в дополнительных настройках виджета — SM → 2×2, MD → 4×2, LG → 4×4. Список доступных шаблонов при этом не меняется.
³ Контакты: и список доступных шаблонов, и шаблон по умолчанию определяются настройкой «Размер блока» в дополнительных настройках виджета:
| Размер блока | Доступные шаблоны | По умолчанию |
|---|---|---|
| Малый (SM) | 2×2 | 2×2 |
| Средний (MD) | 4×4 | 4×4 |
| Большой (LG) | 4×6, 6×6 | 4×6 |
| Не задан | 2×2, 4×4, 4×6, 6×4, 6×6 | — |
⁴ Счётчики: аналогично виджету «Контакты», на основе настройки «Размер блока»:
| Размер блока | Доступные шаблоны | По умолчанию |
|---|---|---|
| Малый (SM) | 2×2 | 2×2 |
| Средний (MD) | 4×4 | 4×4 |
| Большой/Смешанный (LG, Mix) | 4×6, 6×6 | 4×6 |
| Не задан | 2×2, 4×4, 4×6, 6×6 | — |
Для настройки виджетов, когда включен режим переноса виджетов построчно и выбрана определенная ширина (не во всю ширину), доступен параметр Начать с новой строки. По умолчанию выключен. При включении флага виджет всегда начинает отрисовываться с первой колонки строки сетки, занимая заданное количество колонок. Виджеты, расположенные до или после, не меняют своего положения. Если у виджета выбрана ширина во всю ширину, параметр Начать с новой строки недоступен и не отображается в настройках. При изменении типа адаптивности дашборда или переключении ширины виджета на во всю ширину это значение сбрасывается. Правило применяется, когда перенос виджетов активен в режиме "по строкам". Если виджет, с которого начинается новая строка, скрыт, правило для него не действует. Можно настроить несколько виджетов для начала с новой строки.
Секция¶
Это блоки контента, которые всегда занимают всю ширину строки сетки, но могут делить ее на заданные пропорциональные части. Необходимо явно указать долю, которую секция занимает в строке. При изменении размера экрана такие секции пропорционально растягиваются или сжимаются, сохраняя свою логическую долю пространства.
Если выбран тип Секция, открываются настройки Шаблон секции с вариантами: 1/1, 1/full, full/1), Высота секции и поле Виджеты для добавления виджетов внутрь секции. В секцию может быть добавлено множество виджетов, они будут располагаться на экране в соответствии с шаблоном секции. Шаблон секции 1/1 Шаблон секции 1/full
Расширенные настройки секций и виджетов¶
Фиксированная высота¶
Для секций и для виджетов с шириной «во всю ширину» доступен явный выбор фиксированной высоты из выпадающего списка. Допустимые значения: 2, 4, 6, 8, 12. Это позволяет точно контролировать занимаемое место на экране независимо от содержимого.
Адаптивное поведение секций с шаблоном 1/1 на мобильных устройствах¶
У секций с шаблоном 1/1 при перестроении на малых экранах виджеты встают один под другим и каждый из них наследует высоту, заданную для всей секции. Например, если секции задана высота «4», то в мобильном виде каждый виджет внутри тоже получит высоту «4».
Выбор ширины для асимметричных шаблонов (1/full и full/1)¶
Для секций с шаблонами 1/full и full/1 доступна опция выбора ширины. В выпадающем списке доступны значения 2, 4, 6 (по умолчанию — 2). От выбранного значения зависит точка адаптивного переключения:
- Ширина 6 — при ширине экрана менее 960 px секция переходит в режим отображения виджетов один под другим на всю ширину.
- Ширина 2 или 4 — тот же режим активируется при ширине экрана менее 600 px.
Контейнер¶
Это блок, решающий проблему динамического контента. В него помещаются виджеты, видимость которых зависит от прав пользователя. Контейнер гарантирует, что при скрытии какого-либо виджета для конкретного пользователя в макете не образуется пустые места — остальные элементы сетки сохраняют свое положение. Таким образом, для разных ролей интерфейс остается целостным и предсказуемым, так как контейнер всегда занимает отведенное ему место в сетке, вне зависимости от видимости вложенных в него виджетов.