メインコンテンツにスキップ

ドキュメント

タイル

異なる背景を持つレイアウトボックスを作成し、それらをシームレスに並べて配置できます。

使用方法

このコンポーネントを適用するには、<div>要素に.uk-tileクラスを追加します。 デフォルトでは、タイルは空白です。そのため、スタイルを設定するために、以下の修飾子クラスのいずれかを追加することが重要です。

クラス 説明
.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>