List

轻松创建美观的列表，并提供多种样式。

用法

要应用该组件，请为无序列表或有序列表添加 .uk-list 类。此时列表不再显示任何间距或列表样式。

<ul class="uk-list">
    <li></li>
    <li></li>
    <li></li>
</ul>

List item 1
List item 2
List item 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 开始。
`.uk-list-hyphen`	使用连字符作为标记。

<ul class="uk-list uk-list-disc">…</ul>

Disc

List item 1
List item 2
List item 3

Circle

List item 1
List item 2
List item 3

Square

List item 1
List item 2
List item 3

Decimal

List item 1
List item 2
List item 3

Hyphen

List item 1
List item 2
List item 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>

Muted

List item 1
List item 2
List item 3

Emphasis

List item 1
List item 2
List item 3

Primary

List item 1
List item 2
List item 3

Secondary

List item 1
List item 2
List item 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>

List item 1
List item 2
List item 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>

List item 1
List item 2
List item 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>

List item 1
List item 2
List item 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>

Large

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

Collapse

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

List item 1
List item 2
List item 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>

可访问性

为 List 组件设置合适的 WAI-ARIA 角色、状态和属性。

如果使用 <div> 元素，请为列表设置 list 角色，为列表项设置 listitem 角色。

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

文档