跳至主要内容

文档

列表

轻松创建美观列表，提供不同样式。

用法

要应用此组件，请将 .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 开始。
.uk-list-hyphen 使用连字符作为标记 
<ul class="uk-list uk-list-disc">…</ul>

  • 圆盘

    • 列表项 1
    • 列表项 2
    • 列表项 3

    圆圈

    • 列表项 1
    • 列表项 2
    • 列表项 3

    方块

    • 列表项 1
    • 列表项 2
    • 列表项 3

    十进制

    • 列表项 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>