Компонент Плитка : 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>
  • Default

    Muted

    Primary

    Secondary

  • <div class="uk-child-width-1-2@s uk-grid-collapse uk-text-center" uk-grid>
        <div>
            <div class="uk-tile uk-tile-default">
                <p class="uk-h4">Default</p>
            </div>
        </div>
        <div>
            <div class="uk-tile uk-tile-muted">
                <p class="uk-h4">Muted</p>
            </div>
        </div>
        <div>
            <div class="uk-tile uk-tile-primary">
                <p class="uk-h4">Primary</p>
            </div>
        </div>
        <div>
            <div class="uk-tile uk-tile-secondary">
                <p class="uk-h4">Secondary</p>
            </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>

Дополнительный пример

  • Плитка Muted

    "Ах! Как бы выразить, как бы вдохнуть в рисунок то, что так полно, так трепетно живет во мне, запечатлеть отражение моей души, как душа моя - UIkit 3!"

    Кнопка Кнопка

    Плитка Primary

    "Ах! Как бы выразить, как бы вдохнуть в рисунок то, что так полно, так трепетно живет во мне, запечатлеть отражение моей души, как душа моя - UIkit 3!"

    Кнопка Кнопка

  • <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>
Документация
Компоненты