Плитка

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

Использование

Для начала работы с компонентом добавльте класс .uk-tile к элементу <div>. По умолчанию стиля не будет. Вот почему важно добавить один из следующих классов-модификаторов для стилизации:

Класс Описание
.uk-tile-default Применяет фон плитки по умолчанию.
.uk-tile-muted Применяет приглушенный фон плитки.
.uk-tile-primary Применяет основной фон плитки.
.uk-tile-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>