UIkit3.x文档

瓷砖/Tile

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

用法

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

Class Description
.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>

Tile and padding

默认情况下，瓷砖组件带有一些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>