跳至主要內容

文件

磁磚

建立具有不同背景的佈局框，可以無縫排列在一起。

用法

若要套用此元件，請將 .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>