列表／List

# 列表／List

<p class="uk-text-lead">轻松创建具有各种样式的漂亮的列表。</p>

## Usage-用法

要应用此组件，请将 `.uk-list` class类添加到无序列表或有序列表。列表将不显示任何间距或list-style。

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

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

***

## Style type modifiers-样式修饰

添加以下类之一以设置列表项的标记。

| Class              | 描述                                      |
| :----------------- | :----------------------------------------------- |
| `.uk-list-disc`    | 使用实心圆作为标记                    |
| `.uk-list-circle`  | 使用空心圆作为标记                   |
| `.uk-list-square`  | 使用实心正方形作为标记                    |
| `.uk-list-decimal` | 使用十进制数字作为标记。 从1开始 |
| `.uk-list-hyphen`  | 使用连字符作为标记                           |

```html
<ul class="uk-list uk-list-disc">...</ul>
```

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

***

## Color modifiers-颜色修改器

添加以下类别之一以设置标记颜色。

| Class                | 描述                                                      |
| :------------------- | :--------------------------------------------------------------- |
| `.uk-list-muted`     | 添加此类以使用标记淡轻                               |
| `.uk-list-emphasis`  | 添加此类以使用强调标记                          |
| `.uk-list-primary`   | 添加此类以强调具有原色的标记   |
| `.uk-list-secondary` | 添加此类以突出带有辅助颜色的标记 |

```html
<ul class="uk-list uk-list-disc uk-list-primary">...</ul>
```

```example
//建议使用火狐浏览器预览此代码
<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>
```

**注意** 颜色修改器在Chrome和Edge中不起作用，因为 `::marker` 尚不支持伪元素。 投票解决  [Chromium 问题](https://bugs.chromium.org/p/chromium/issues/detail?id=457718) ，给予更多关注。

***

## Image bullet modifier-图像项目符号修改器

添加 `.uk-list-bullet` class类以将自定义图像项目符号设置为列表项的标记。 注意，它不能与颜色修改器结合使用。

```html
<ul class="uk-list uk-list-bullet">...</ul>
```

```example
<ul class="uk-list uk-list-bullet">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
```

***

## Divider modifier-分隔线修饰

添加 `.uk-list-divider` class来用线条分隔列表项。

```html
<ul class="uk-list uk-list-divider">...</ul>
```

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

***

## Striped modifier-条纹修饰

使用 `.uk-list-striped` class为列表添加斑马纹效果。

```html
<ul class="uk-list uk-list-striped">...</ul>
```

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

***

## Size modifier-大小修饰

添加以下类别之一，以增加或减少列表项之间的间距。 您可以将其与任何其他列表修饰符结合使用。

| Class               | 描述                              |
| :------------------ | :--------------------------------------- |
| `.uk-list-large`    | 增加列表项之间的间距。 |
| `.uk-list-collapse` | 删除列表项之间的间距。   |

```html
<ul class="uk-list uk-list-large">...</ul>
```

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