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

ドキュメント

リスト

見栄えの良いリストを簡単に作成できます。様々なスタイルがあります。

使用方法

このコンポーネントを使用するには、順序付きリストまたは順序なしリストに.uk-listクラスを追加します。リストは、間隔やリストスタイルなしで表示されます。

<ul class="uk-list">
    <li></li>
    <li></li>
    <li></li>
</ul>
    • リスト項目1
    • リスト項目2
    • リスト項目3
  • <ul class="uk-list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

スタイルの種類修飾子

リスト項目のマーカーを設定するには、次のクラスのいずれかを追加します。

クラス 説明
.uk-list-disc 塗りつぶされた円をマーカーとして使用します。
.uk-list-circle 空洞の円をマーカーとして使用します。
.uk-list-square 塗りつぶされた四角形をマーカーとして使用します。
.uk-list-decimal 1から始まる10進数をマーカーとして使用します。
.uk-list-hyphen ハイフンをマーカーとして使用します。 
<ul class="uk-list uk-list-disc">…</ul>

  • 円形

    • リスト項目1
    • リスト項目2
    • リスト項目3

    丸型

    • リスト項目1
    • リスト項目2
    • リスト項目3

    四角形

    • リスト項目1
    • リスト項目2
    • リスト項目3

    10進数

    • リスト項目1
    • リスト項目2
    • リスト項目3

    ハイフン

    • リスト項目1
    • リスト項目2
    • リスト項目3
  • <div class="uk-child-width-expand@s" uk-grid>

    <div>
        <h4>Disc</h4>
        <ul class="uk-list uk-list-disc">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Circle</h4>
        <ul class="uk-list uk-list-circle">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Square</h4>
        <ul class="uk-list uk-list-square">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Decimal</h4>
        <ul class="uk-list uk-list-decimal">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Hyphen</h4>
        <ul class="uk-list uk-list-hyphen">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

</div>

色の修飾子

マーカーの色を設定するには、次のクラスのいずれかを追加します。

クラス 説明
.uk-list-muted マーカーを弱めるためにこのクラスを追加します。
.uk-list-emphasis マーカーを強調するためにこのクラスを追加します。
.uk-list-primary 主要な色でマーカーを強調するためにこのクラスを追加します。
.uk-list-secondary 副次的な色でマーカーを強調するためにこのクラスを追加します。 
<ul class="uk-list uk-list-disc uk-list-primary">…</ul>

  • 弱める

    • リスト項目1
    • リスト項目2
    • リスト項目3

    強調

    • リスト項目1
    • リスト項目2
    • リスト項目3

    主要色

    • リスト項目1
    • リスト項目2
    • リスト項目3

    副次色

    • リスト項目1
    • リスト項目2
    • リスト項目3
  • <div class="uk-child-width-expand@s" uk-grid>

    <div>
        <h4>Muted</h4>
        <ul class="uk-list uk-list-disc uk-list-muted">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Emphasis</h4>
        <ul class="uk-list uk-list-disc uk-list-emphasis">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Primary</h4>
        <ul class="uk-list uk-list-disc uk-list-primary">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <h4>Secondary</h4>
        <ul class="uk-list uk-list-disc uk-list-secondary">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

</div>

画像マーカー修飾子

.uk-list-bulletクラスを追加して、カスタム画像マーカーをリスト項目のマーカーとして設定します。これは色の修飾子と組み合わせることができません。

<ul class="uk-list uk-list-bullet">…</ul>
    • リスト項目1
    • リスト項目2
    • リスト項目3
  • <ul class="uk-list uk-list-bullet">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

区切り線修飾子

.uk-list-dividerクラスを追加して、リスト項目を線で区切ります。

<ul class="uk-list uk-list-divider">…</ul>
    • リスト項目1
    • リスト項目2
    • リスト項目3
  • <ul class="uk-list uk-list-divider">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

縞模様修飾子

.uk-list-stripedクラスを使用して、リストにゼブラストライプを追加します。

<ul class="uk-list uk-list-striped">…</ul>
    • リスト項目1
    • リスト項目2
    • リスト項目3
  • <ul class="uk-list uk-list-striped">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

サイズ修飾子

リスト項目の間隔を増減するには、次のクラスのいずれかを追加します。これは他のリスト修飾子と組み合わせることができます。

クラス 説明
.uk-list-large リスト項目の間隔を広げます。
.uk-list-collapse リスト項目の間隔を削除します。 
<ul class="uk-list uk-list-large">…</ul>

  • 大きい

    • リスト項目1
    • リスト項目2
    • リスト項目3
    • リスト項目1
    • リスト項目2
    • リスト項目3
    • リスト項目1
    • リスト項目2
    • リスト項目3
    • リスト項目1
    • リスト項目2
    • リスト項目3

    折りたたむ

    • リスト項目1
    • リスト項目2
    • リスト項目3
    • リスト項目1
    • リスト項目2
    • リスト項目3
    • リスト項目1
    • リスト項目2
    • リスト項目3
    • リスト項目1
    • リスト項目2
    • リスト項目3
  • <h4>Large</h4>

<div class="uk-child-width-expand@s" uk-grid>

    <div>
        <ul class="uk-list uk-list-large">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="uk-list uk-list-large uk-list-disc">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="uk-list uk-list-large uk-list-divider">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="uk-list uk-list-large uk-list-striped">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

</div>

<h4>Collapse</h4>

<div class="uk-child-width-expand@s" uk-grid>

    <div>
        <ul class="uk-list uk-list-collapse">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="uk-list uk-list-collapse uk-list-disc">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="uk-list uk-list-collapse uk-list-divider">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

    <div>
        <ul class="uk-list uk-list-collapse uk-list-striped">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div>

</div>

アクセシビリティ

リストコンポーネントに適切なWAI-ARIAロール、状態、プロパティを設定します。

<div class="uk-list" role="list">
    <div role="listitem">List item 1</div>
    <div role="listitem">List item 2</div>
    <div role="listitem">List item 3</div>
</div>