Компонент Плитка Tile
Создавайте макеты с различными фонами, которые можно расположить рядом друг с другом, словно плитка. Руководство по использованию.
Создание разметки
Разметка. Стили
Чтобы применить этот компонент потрясающего фремворка UIkit 3,
добавьте к элементу <div>
класс .uk-tile
. По умолчанию плитка пуста.
Вот почему важно добавить один из следующих классов-модификаторов для стиля.
Класс | Описание |
---|---|
.uk-tile-default |
Применяет фон плитки по умолчанию (default = белый). |
.uk-tile-muted |
Применяет приглушенный фон «плитки» (muted) |
.uk-tile-primary |
Применяет основной фон «плитки» (primary). |
.uk-tile-secondary |
Применяет второстепенный фон «плитки» (secondary). |
<div class="uk-tile uk-tile-default"></div>
Preserve color
Классы .uk-tile-primary
и .uk-tile-secondary
автоматически расширяют инверсный стиль из компонента Inverse.
Если вы хотите предотвратить такое поведение, например, потому что в этих разделах используются карты, добавьте класс .uk-preserve-color
.
<div class="uk-tile uk-tile-primary uk-preserve-color"></div>
-
Tile Primary
Недостаточно просто знать, нужно использовать знания.
Tile Secondary
Не достичь успеха – иногда тоже большая удача.
-
<div class="uk-child-width-1-2@s uk-grid-collapse uk-grid-match uk-text-center" uk-grid> <div> <div class="uk-tile uk-tile-primary"> <div class="uk-panel uk-light uk-margin-medium"> <h3>Tile Primary</h3> </div> <div class="uk-card uk-card-default uk-card-body"> <p>Недостаточно просто знать, нужно использовать знания.</p> </div> </div> </div> <div> <div class="uk-tile uk-tile-secondary"> <div class="uk-panel uk-light uk-margin-medium"> <h3>Tile Secondary</h3> </div> <div class="uk-card uk-card-default uk-card-body"> <p>Не достичь успеха – иногда тоже большая удача.</p> </div> </div> </div> </div>
Внутренние отступы
«Плитка» и внутренние отступы
Компонент Плитка по умолчанию имеет кое-какие отступы. Чтобы удалить их или применить другие отступы, добавьте один из классов из компонента Padding.
<div class="uk-tile uk-tile-default uk-padding-large"></div>
-
Remove
Small
Large
-
<div class="uk-child-width-1-3@s uk-grid-small uk-text-center" uk-grid> <div> <div class="uk-tile uk-tile-muted uk-padding-remove"> <p class="uk-h4">Remove</p> </div> </div> <div> <div class="uk-tile uk-tile-primary uk-padding-small"> <p class="uk-h4">Small</p> </div> </div> <div> <div class="uk-tile uk-tile-secondary uk-padding-large"> <p class="uk-h4">Large</p> </div> </div> </div>
-
-
<div class="uk-child-width-1-2@s uk-grid-collapse uk-grid-match" uk-grid> <div> <div class="uk-tile uk-tile-muted"> <h3>Плитка Muted</h3> <p>"Ах! Как бы выразить, как бы вдохнуть в рисунок то, что так полно, так трепетно живет во мне, запечатлеть отражение моей души, как душа моя - <a href="/v3">UIkit 3</a>!"</p> <p uk-margin> <a class="uk-button uk-button-default" href="#">Кнопка</a> <a class="uk-button uk-button-text uk-margin-small-left" href="#">Кнопка</a> </p> </div> </div> <div> <div class="uk-tile uk-tile-primary"> <h3>Плитка Primary</h3> <p>"Ах! Как бы выразить, как бы вдохнуть в рисунок то, что так полно, так трепетно живет во мне, запечатлеть отражение моей души, как душа моя - <a href="/v3">UIkit 3</a>!"</p> <p uk-margin> <a class="uk-button uk-button-default" href="#">Кнопка</a> <a class="uk-button uk-button-text uk-margin-small-left" href="#">Кнопка</a> </p> </div> </div> </div>