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

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

<!-- WML -->
<div class="controls__block-layout" style="height: 600px;">
    <div class="ws-flexbox">
        <div class="ws-flexbox ws-flex-column ws-flex-grow-1">
            <div class="controls__block-layout-item">
                <div class="controlsDemo-newBlocks__block">1</div>
            </div>
            <div class="controls__block-layout-item">
                <div class="controlsDemo-newBlocks__block">2</div>
            </div>
        </div>
        <div class="ws-flex-grow-1 ws-flexbox ws-flex-column">
            <div class="controls__block-layout-item ws-flex-grow-1">
                <div class="controlsDemo-newBlocks__block">3</div>
            </div>
        </div>
    </div>
</div>

Чтобы организовать область блоков, есть два основных элемента, описание которых происходит с помощью css-классов:

• раскладка — controls__block-layout;
• блок — controls__block-layout-item.

Класс controls__block-layout-item нужно использовать для каждого блока.

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

Для задания серого фона раскладки необходимо на контейнер с классом controls__block-layout-item навесить дополнительно класс controls__block-layout-item-background.

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

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

<!-- WML -->
<Controls.scroll:Container>
   <div class="controls__block-layout controls__block-layout-background">
      <div class="controls__block-layout-item"></div>
      <div class="controls__block-layout-item"></div>
      <div class="controls__block-layout-item"></div>
   </div>
</Controls.scroll:Container>

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

Алгоритм позиционирования блоков в раскладке задается прикладным разработчиком. Для настройки позиционирования блоков в раскладке, необходимо обернуть раскладку в контейнер и задать на нем СSS-класс для позиционирования.

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

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

Блоки с цветным фоном

Блоки могут иметь цветной фон. Возможны 2 варианта настройки: с полной заливкой фона и с градиентной.

Чтобы настроить полную заливку фона, используйте класс controls__block_backgroundStyle-*, где * - это цвет заливки из набора стандартных.

<!-- WML -->
<div class="controls__block-wrapper">
    <div class="controls__block-contrast controls__block_backgroundStyle-unaccented">
        some content
    </div>
</div>

Чтобы настроить градиентную заливку фона, используйте класс controls__block_backgroundStyle-gradient-*, где * - это цвет заливки из набора стандартных.

<!-- WML -->
<div class="controls__block-wrapper">
    <div class="controls__block-contrast controls__block_backgroundStyle-gradient-unaccented">
        some content
    </div>
</div>

Скругление углов

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

Чтобы отключить скругление углов, используйте класс controls__block-wrapper none.

<!-- WML -->
<div class="controls__block-wrapper none">
    <div class="controls__block">
        some content
    </div>
</div>

Чтобы включить скругление углов только для верхнего левого угла, используйте класс controls__block-wrapper tl.

<!-- WML -->
<div class="controls__block-wrapper tl">
    <div class="controls__block">
        some content
    </div>
</div>

Чтобы включить скругление углов только для верхнего правого угла, используйте класс controls__block-wrapper tr.

<!-- WML -->
<div class="controls__block-wrapper tr">
    <div class="controls__block">
        some content
    </div>
</div>

Чтобы включить скругление углов только для верхних углов, используйте класс controls__block-wrapper tlr.

<!-- WML -->
<div class="controls__block-wrapper tlr">
    <div class="controls__block">
        some content
    </div>
</div>

Тени блоков

Чтобы отключить тени у блоков, используйте класс controls__block-wrapper without-shadow.

<!-- WML -->
<div class="controls__block-wrapper without-shadow" style="width: 500px; height: 135px">
    <div class="controls__block">
        some content
    </div>
</div>