跳至主要内容

文档

磁贴

创建具有不同背景的布局框，这些框可以无缝地排列在一起。

用法

要应用此组件，请将 .uk-tile 类添加到 <div> 元素中。默认情况下，磁贴是空白的。因此，添加以下修饰符类之一进行样式设置非常重要。

类 描述
.uk-tile-default 应用默认磁贴背景。
.uk-tile-muted 应用静音磁贴背景。
.uk-tile-primary 应用主磁贴背景。
.uk-tile-secondary 应用辅助磁贴背景。 
<div class="uk-tile uk-tile-default"></div>

  • 默认

    静音

    主要

    辅助

  • <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>

保留颜色

.uk-tile-primary 和 .uk-tile-secondary 类自动扩展了 反向组件 中的反向样式。如果您想阻止此行为，例如因为您在这些部分中使用 卡片，请添加 .uk-preserve-color 类。

<div class="uk-tile uk-tile-primary uk-preserve-color"></div>

  • 带卡片的主磁贴

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    带卡片的辅助磁贴

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <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 with card</h3>
            </div>

            <div class="uk-card uk-card-default uk-card-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>

        </div>
    </div>
    <div>
        <div class="uk-tile uk-tile-secondary">

            <div class="uk-panel uk-light uk-margin-medium">
                <h3>Tile Secondary with card</h3>
            </div>

            <div class="uk-card uk-card-default uk-card-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>

        </div>
    </div>
</div>

磁贴和填充

磁贴组件默认具有填充。要移除此填充或应用不同的间距，请添加 填充组件 中的类之一。

<div class="uk-tile uk-tile-default uk-padding-large"></div>

  • 移除

    小

    大

  • <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>