Дополнительные результаты использования экземпляра Optimizely SaaS CMS; настройка стратегии CSS для рендеринга сеток Visual Builder.
Это проверено с пакетом типов контента в Инструмент CLI из предыдущего поста в блоге.
Чтобы узнать, как вы можете его использовать, в другой предыдущей записи блога показано, как настраиваются маршрутизация и рендеринг..
Стратегия должна хорошо работать для разных стеков, как на основе JS, так и для компонентов Razor (Blazor) или MVC/Razor Pages.
Я предпочитаю Tailwind CSS, но, в конце концов, это всего лишь CSS, поэтому стратегия должна быть применима для любой настройки CSS.
Я создал Experience компонент, обрабатывающий рендеринг исходной трехуровневой иерархии; сетки (разделы) → строки → столбцы — с помощью «CSS Grid».
Разделы
Каждая сетка/раздел отображается как элемент верхнего уровня.
Design настройки отображения или если обнаружен общий блок:
- Сетка по умолчанию
-
grid grid-cols-6 gap-4 w-full- Сетка из 6 столбцов сgap-4желоб. - Обычная сетка (
design01в пакете типов контента) -
grid grid-cols-6 w-full- Простая сетка из 6 столбцов без полей и промежутков между столбцами. Используется для размещения содержимого во всю ширину без применения к разделу какого-либо дизайна — добавление нескольких столбцов в одну строку с этим набором стилей может быть не рекомендуется.Обычно используется с разделами контента типа «Стандартная страница» (например, заголовок, преамбула, текст с форматированным текстом).
- Узел компонента (для общих блоков)
-
grid grid-cols-1 w-full- Сетка из одного столбца, используемая для общих блоков или разделов без сетки (ожидается поддержка общих блоков для использования на уровне столбцов, но пока; это единственное место для общих блоков).
Строки
Строки повторяются, но не создавать элемент-обертку; столбцы перетекают непосредственно в родительскую сетку из 6 столбцов, выравнивая уровень строк, что нам не нужно при использовании «CSS Grid» (в отличие от решений, использующих Flex).
Это означает, что нет data-epi-block-id для строки в выводе, но я не увидел в этом никаких недостатков.
Строка — это просто группа столбцов, используемая для математических вычислений, для которых col-span-* класс для рендеринга в столбце
Columns
Each column receives a
col-span-* класс определяется количеством одноуровневых столбцов в его строке:
| Колс | Классы | Поведение |
|---|---|---|
| 1 | col-span-6 |
Полная ширина |
| 2 | col-span-6 lg:col-span-3 |
Полная ширина на мобильном устройстве; половина (3/6) на больших экранах |
| 3+ | col-span-6 lg:col-span-2 |
Полная ширина на мобильном устройстве; третий (2/6) на больших экранах |
Благодаря этому адаптивному шаблону: столбцы располагаются вертикально на маленьких экранах и располагаются рядом друг с другом. lg: точку останова и до 3 элементов на визуальную строку — но мы могли бы добавить в код и поддерживать шесть компонентов на строку, если этого требует дизайн — теперь они просто визуализируются в новой строке после каждых трех (поэтому редактору не обязательно создавать больше строк в Visual Builder, более трех в строке приведет к тому, что все будут отображаться с наименьшей шириной).
Дополнительные стили, влияющие на столбцы
- Столбцы сетки по умолчанию
-
bg-white border-1 border-slate-300 rounded-lg ring-1 shadow-xs ring-black/5 overflow-hidden- Карточка с фоном, рамкой, тенью и закругленными углами.Угловые колонны в первый и последний строки также получают очень большой радиус границы для создания визуальной группировки:
- Первая строка, первый столбец →
lg:rounded-tl-4xl - Первая строка, последний столбец →
lg:rounded-tr-4xl - Последняя строка, первый столбец →
lg:rounded-bl-4xl - Последняя строка, последний столбец →
lg:rounded-br-4xl
- Первая строка, первый столбец →
- Столбцы простой сетки
-
space-y-4— Только вертикальное расстояние между дочерними элементами.
Компоненты (также называемые элементами)
Внутри каждого столбца отдельные элементы заключены в
, currently with no other utilities set. The element's own component then takes care of other design details.
Comments?
Опубликовано
и помечены этими категориями: Оптимально
