清單
輕鬆建立美觀的清單，並提供不同的樣式。
用法
要應用此元件，請將 .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><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><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>大型
摺疊
<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>元素，請將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>