Область блоков

Область блоков — это область на странице или панели, в которой информация визуально разделена по смыслу или содержанию на отдельные блоки.

Пример области из трех блоков
Рис. 1. Пример области из трех блоков

<div class="controls-BlockLayout_theme-{{_options.theme}}">
    <div class="controls-BlockLayout__blockGroup_theme-{{_options.theme}}">
        <div class="controls-BlockLayout__block_theme-{{_options.theme}}">BLOCK 1</div>
        <div class="controls-BlockLayout__block_theme-{{_options.theme}}">BLOCK 2</div>
    </div>
    <div class="controls-BlockLayout__blockGroup_theme-{{_options.theme}}">
        <div class="controls-BlockLayout__block_theme-{{_options.theme}}">BLOCK 3</div>
    </div>
</div>

Для того чтобы организовать область блоков, есть три основных элемента – раскладка, группа и блок. Описание элементов происходит с помощью css-классов:

  • controls-BlockLayout_theme-{{_options.theme}};
  • controls-BlockLayout__blockGroup_theme-{{_options.theme}};
  • controls-BlockLayout__block_theme-{{_options.theme}}.

Классы controls-BlockLayout_theme-{{_options.theme}} и controls-BlockGroup_theme-{{_options.theme}} нужно использовать только в том случае, если блоки могут динамически менять свое расположение на странице. Класс controls-BlockLayout__block_theme-{{_options.theme}} нужно использовать для каждого блока.

Раскладка блоков является контейнером для групп блоков. Раскладка блоков должна быть определена в любом случае, даже если она содержит только одну группу блоков.

Группа блоков объединяет блоки для позиционирования их друг относительно друга. Алгоритм позиционирования элементов задается программистом отдельно на контейнере группы. Выбор алгоритма позиционирования, влияет на структуру раскладки блоков и количество групп в ней.

Блоком является контейнер с рамками, в котором размещается пользовательский контент. Блоки всегда располагаются в группах.

Если блоки статичны, то для их позиционирования нужно использовать следующие классы:

  • controls-BLockLayout__block_border-top_theme-{{_options.theme}};
  • controls-BLockLayout__block_border-right_theme-{{_options.theme}};
  • controls-BLockLayout__block_border-bottom_theme-{{_options.theme}};
  • controls-BLockLayout__block_border-left_theme-{{_options.theme}}.

Если при организации области блоков требуется Controls/scroll:Container, то структура меняется:

<Controls.scroll:Container attr:class="controls-BlockLayou_theme-{{_options.theme}}">
   <div class="controls-BlockLayout__block_theme-{{_options.theme}}"></div>
   <div class="controls-BlockLayout__block_theme-{{_options.theme}}"></div>
   <div class="controls-BlockLayout__block_theme-{{_options.theme}}"></div>
   ...
</Controls.scroll:Container>

Использование controls-BlockLayout__blockGroup_theme-{{_options.theme}} не требуется.

Классы .controls-BlockLayout** необходимо подключать в зависимости через _theme = ['Controls/BlockLayout'].

Примеры позиционирования блоков

Алгоритм позиционирования блоков в группе задается прикладным разработчиком. Как правило необходимо указать пользовательские CSS-классы для позиционирования на элементы с классами controls-BlockLayout__block_theme-{{_options.theme}} внутри контейнера с классом controls-BlockLayout__blockGroup_theme-{{_options.theme}}.

В простейшем случае блоки располагаются вертикально друг относительно друга благодаря стандартной потоковой блочной верстке.

Пример
Исходный код
На весь экран

Для более сложных правил позиционирования необходимо пользоваться богатым набором возможностей CSS-раскладок Flexbox и Grid Layout.

Настройка внешнего вида раскладки

  • .controls-BlockLayout_detached_theme-{{_options.theme}} — добавляет верхнюю границу. Используется совместно с классом .controls-BlockLayout_theme-{{_options.theme}}.

Область блоков с добавлением верхней границы
Рис. 2. Область блоков с добавлением верхней границы

Настройка внешнего вида блоков

  • .controls-BlockLayout__block_style_1_theme-{{_options.theme}} — добавляет блоку цвет фона #FFFFFF. Используется совместно с controls-BlockLayout__block_theme-{{_options.theme}}.
  • .controls-BlockLayout__block_style_2_theme-{{_options.theme}} — добавляет блоку цвет фона #F8F8F8. Используется совместно с .controls-BlockLayout__block_theme-{{_options.theme}}.
  • .controls-BlockLayout__block_style_3_theme-{{_options.theme}} — добавляет блоку цвет фона #FBF9F7. Используется совместно с .controls-BlockLayout__block_theme-{{_options.theme}}.
  • .controls-BlockLayout__block_style_4_theme-{{_options.theme}} — добавляет блоку цвет фона #F7F4F0. Используется совместно с controls-BlockLayout__block_theme-{{_options.theme}}.
  • .controls-BlockLayout__block_style_5_theme-{{_options.theme}} — добавляет блоку цвет фона #F0F5FB. Используется совместно с controls-BlockLayout__block_theme-{{_options.theme}}.
  • .controls-BlockLayout__block_style_6_theme-{{_options.theme}} — добавляет блоку цвет фона #F0F5FB. Используется совместно с controls-BlockLayout__block_theme-{{_options.theme}}.
  • .controls-BlockLayout_background_theme-{{_options.theme}} — добавляет цвет фона раскладке. Цвет соответствует цвету границ между блоками.

Область блоков с добавлением цветового фона
Рис. 3. Область блоков с добавлением цветового фона