Компонент Плитка

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

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>

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>
Дополнительно

Плитка 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>
                <button class="uk-button uk-button-default" type="button">Кнопка</button>
                <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>
                <button class="uk-button uk-button-default" type="button">Кнопка</button>
                <a class="uk-button uk-button-text uk-margin-small-left" href="#">Ссылка</a>
            </p>
        </div>
    </div>
</div>