文字列表

普通列表

<ul class="ui-list">
<li><a href="">每个人都有一个死角, 自己走不出来,别人也闯不进去。</a></li>
<li><a href="">我把最深沉的秘密放在那里。</a></li>
<li><a href="">你不懂我,我不怪你。</a></li>
<li><a href="">每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</a></li>
</ul>

图标

<ul class="ui-list">
<li><a href=""><i class="ui-icon-home"></i>每个人都有一个死角, 自己走不出来,别人也闯不进去。</a></li>
<li><a href=""><i class="ui-icon-user"></i>我把最深沉的秘密放在那里。</a></li>
<li><a href=""><i class="ui-icon-tel"></i>你不懂我,我不怪你。</a></li>
<li><a href=""><i class="ui-icon-edit"></i>每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</a></li>
</ul>

右侧箭头

<ul class="ui-list">
<li><a href="">每个人都有一个死角, 自己走不出来,别人也闯不进去。</a><span class="arrow"></span></li>
<li><a href="">我把最深沉的秘密放在那里。</a><span class="arrow"></span></li>
<li><a href="">你不懂我,我不怪你。</a><span class="arrow"></span></li>
<li><a href="">每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</a><span class="arrow"></span></li>
</ul>

带微标

<ul class="ui-list">
<li><a href=""><i class="ui-icon-home"></i>每个人都有一个死角, 自己走不出来,别人也闯不进去。</a><div class="ui-list-right"><span class="ui-badge ui-badge-red">9</span><span class="arrow"></span></div></li>
<li><a href=""><i class="ui-icon-home"></i>我把最深沉的秘密放在那里。</a><div class="ui-list-right"><span class="ui-badge ui-badge-blue">8</span><span class="arrow"></span></div></li>
<li><a href=""><i class="ui-icon-home"></i>你不懂我,我不怪你。</a><div class="ui-list-right"><span class="ui-badge ui-badge-yellow">6</span><span class="arrow"></span></div></li>
<li><a href=""><i class="ui-icon-home"></i>每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</a><div class="ui-list-right"><span class="ui-badge ui-badge-dot badge-red"></span></div></li>
</ul>

边框

<ul class="ui-list ui-list-border ui-list-hover ui-list-striped">
<li><a href="" class="text-hide"><i class="ui-icon-home"></i>每个人都有一个死角, 自己走不出来,别人也闯不进去。</a><span class="arrow"></span></li>
<li><a href=""><i class="ui-icon-user"></i>我把最深沉的秘密放在那里。</a><span class="arrow"></span></li>
<li><a href=""><i class="ui-icon-tel"></i>你不懂我,我不怪你。</a><span class="arrow"></span></li>
<li><a href=""><i class="ui-icon-edit"></i>每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</a><span class="arrow"></span></li>
</ul>

参数说明

参数 说明
ui-list-border 加边框
ui-list-hover 标悬停样式
ui-list-striped 隔行换色