UIkit3.x文档

列表

轻松创建具有各种样式的漂亮的列表。

用法

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

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

注意颜色修改器在Chrome和Edge中不起作用，因为::marker尚不支持伪元素。投票解决Chromium问题，给予更多关注。

图像项目符号修改器

添加.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>

单元间距尺寸修饰

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

班级 描述
.uk-list-large 增加列表项之间的间距。
.uk-list-collapse 删除列表项之间的间距。

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