MUI-LIST列表的基本使用

列表是常用的UI控件，mui封装的列表组件比较简单，只需要在

ul

节点上添加

.mui-table-view

类、在

li

节点上添加

.mui-table-view-cell

类即可，如下为示例代码

<ul class="mui-table-view">
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
</ul>

点击列表，对应列表项显示灰色高亮，若想自定义高亮颜色，只需要重写

.mui-table-view-cell.mui-active

即可，如下：

/*点击变蓝色高亮*/
.mui-table-view-cell.mui-active{
background-color: #0062CC;
}

若右侧需要增加导航箭头，变成导航链接，则只需在

li

节点下增加

a

子节点，并为该

a

节点增加

.mui-navigate-right

类即可，如下：

<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 3</a>
</li>
</ul>

mui支持将数字角标、按钮、开关等控件放在列表中；mui默认将数字角标放在列表右侧显示，代码如下：

<ul class="mui-table-view">
<li class="mui-table-view-cell">Item 1
<span class="mui-badge mui-badge-primary">11</span>
</li>
<li class="mui-table-view-cell">Item 2
<span class="mui-badge mui-badge-success">22</span>
</li>
<li class="mui-table-view-cell">Item 3
<span class="mui-badge">33</span>
</li>
</ul>

当然List也是可以自行定义的只要遵循结构即可。下面我们来看下运行的效果图：