|
|---|
Дизайнер CSS Grid используется для создания адаптивных и гибких портальных страниц (дашбордов) с разнородными виджетами, которые невозможно создать при при использовании статичных сеток. Он решает ключевую проблему создания сложных, адаптивных порталов, где разные типы контента требуют разного поведения. В отличие от дизайнера Flex или статичных сеток в дизайнерах Daschboard и Board, CSS Grid позволяет комбинировать несколько стратегий в рамках одной страницы, обеспечивая единое отображение на любом экране от мобильного телефона до широкоформатного монитора.
Интерфейс портальной страницы в режиме 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 |
Определяется настройкой Размер в дополнительных настройках виджета — Малый (SM) → 2×2, Средний (MD) → 4×4, Большой (LG) → 6×6 |
|||||||||||||||
Календарь New |
Шаблон |
2×2, 4×2, 4×4 |
Определяется настройкой Размер в дополнительных настройках виджета — SM → 2×2, MD → 4×2, LG → 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 |
|||||||||||||||
Для настройки виджетов, когда включен режим переноса виджетов построчно и выбрана определенная ширина (не во всю ширину), доступен параметр Начать с новой строки. По умолчанию выключен. При включении флага виджет всегда начинает отрисовываться с первой колонки строки сетки, занимая заданное количество колонок. Виджеты, расположенные до или после, не меняют своего положения. Если у виджета выбрана ширина во всю ширину, параметр Начать с новой строки недоступен и не отображается в настройках. При изменении типа адаптивности дашборда или переключении ширины виджета на во всю ширину это значение сбрасывается. Правило применяется, когда перенос виджетов активен в режиме "по строкам". Если виджет, с которого начинается новая строка, скрыт, правило для него не действует. Можно настроить несколько виджетов для начала с новой строки.
Добавлен виджет
Секция
Это блоки контента, которые всегда занимают всю ширину строки сетки, но могут делить ее на заданные пропорциональные части. Необходимо явно указать долю, которую секция занимает в строке. При изменении размера экрана такие секции пропорционально растягиваются или сжимаются, сохраняя свою логическую долю пространства.
Если выбран тип Секция, открываются настройки Шаблон секции с вариантами: 1/1, 1/full, full/1), Высота секции и поле Виджеты для добавления виджетов внутрь секции. В секцию может быть добавлено множество виджетов, они будут располагаться на экране в соответствии с шаблоном секции.
Шаблон секции 1/1
Шаблон секции 1/full
Шаблон секции full/1
Расширенные настройки секций и виджетов
Фиксированная высота
Для секций и для виджетов с шириной «во всю ширину» доступен явный выбор фиксированной высоты из выпадающего списка. Допустимые значения: 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.
Контейнер
Это блок, решающий проблему динамического контента. В него помещаются виджеты, видимость которых зависит от прав пользователя. Контейнер гарантирует, что при скрытии какого-либо виджета для конкретного пользователя в макете не образуется пустые места — остальные элементы сетки сохраняют свое положение. Таким образом, для разных ролей интерфейс остается целостным и предсказуемым, так как контейнер всегда занимает отведенное ему место в сетке, вне зависимости от видимости вложенных в него виджетов.
Контейнер
