磁块／Tile

创建具有不同背景的布局框，这些布局框可以没有间距地彼此相邻排列。

用法

要应用此组件，请添加 .uk-tile class到 <div> 元素。默认情况下，图块是空白不带任何修饰的。因此添加下面样式修饰类之一是非常必要的。

Class	描述
`.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。如果要移除填充或使用不同尺寸的间隔，请添加使用 Padding 组件中的class之一。

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

上一篇： Thumbnav

下一篇： Toggle

文档

磁块／Tile

用法

磁块和内距

tile.md