Область блоков
Область на странице или панели, в которой информация визуально разделена по смыслу или содержанию на отдельные блоки.
<!-- 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>