列表樣式

從列表樣式開始，可以說是進(jìn)入到了一個(gè)小高潮。任何一個(gè)app都會(huì)有列表類的布局，使用AUI基本可以滿足大多數(shù)開發(fā)者的需求。AUI提供的默認(rèn)布局樣式有普通列表，圖文列表，圖片列表，類似通訊錄效果，開發(fā)者可以結(jié)合柵格系統(tǒng)來布局出更豐富的樣式。

學(xué)習(xí)這塊，單憑看是沒有多大效果的，建議大家多練習(xí)一下。

.aui-list-view 普通列表類的布局容器，.aui-list-view-cell列表項(xiàng)

在.aui-content中結(jié)合.aui-card可以實(shí)現(xiàn)帶有圓角效果的布局樣式

對(duì)li標(biāo)簽都有下劃線的處理，并且默認(rèn)做了15px的縮進(jìn)，如果想去掉的需要自定義一下(使用了.aui-card效果除外)
.aui-list-view .aui-list-view-cell:after {left: 0;}

<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            列表欄目一
        </li>
        ......
    </ul>
</div>

<div class="aui-content aui-card">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            列表欄目一
        </li>
        ......
    </ul>
</div>

可以使用.aui-arrow-right給列表項(xiàng)加上右側(cè)的箭頭。

<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <a class="aui-arrow-right">列表欄目一</a>
        </li>
        ......
    </ul>
</div>

使用.aui-badge給列表增加右側(cè)的角標(biāo)效果，.aui-badge-*來選擇使用樣式，角標(biāo)和右側(cè)箭頭可以共存，也可以單獨(dú)使用

<div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <a class="aui-arrow-right">
            列表欄目一
            <span class="aui-badge aui-badge-info">12</span>
            </a>
        </li>
        ......
    </ul>
</div>