文字列表 · APP模塊

[TOC] # 文字列表 ### 樣式一：普通文字列表 ![](https://box.kancloud.cn/2016-08-26_57bfcfd62f162.png) 相關代碼如下： ``` <div class="aui-content"> <ul class="aui-list-view"> <li class="aui-list-view-cell"> 單行列表標題效果 </li> <li class="aui-list-view-cell"> 單行列表標題效果 </li> <li class="aui-list-view-cell"> 單行列表標題效果 </li> <li class="aui-list-view-cell"> 單行列表標題效果 </li> <li class="aui-list-view-cell"> 單行列表標題效果 </li> </ul> </div> ``` ### 樣式二：文字列表 + 下劃線縮進 ![](https://box.kancloud.cn/2016-08-26_57bfcfd651ed3.png) 相關代碼如下： ``` <div class="aui-content"> <ul class="aui-list-view aui-in"> <li class="aui-list-view-cell"> 單行列表標題效果 </li> <li class="aui-list-view-cell"> 單行列表標題效果 </li> </ul> </div> ``` ### 樣式三：文字列表 + 左側圖標 ![](https://box.kancloud.cn/2016-08-26_57bfcfd66b56e.png) 相關代碼如下： ``` <div class="aui-content"> <ul class="aui-list-view aui-in"> <li class="aui-list-view-cell"> <i class="aui-iconfont aui-icon-edit aui-bg-info"></i>單行列表標題效果 </li> <li class="aui-list-view-cell"> <i class="aui-iconfont aui-icon-emoji aui-bg-success"></i>單行列表標題效果 </li> <li class="aui-list-view-cell"> <i class="aui-iconfont aui-icon-favor aui-bg-danger"></i>單行列表標題效果 </li> <li class="aui-list-view-cell"> <i class="aui-iconfont aui-icon-like aui-bg-warning"></i>單行列表標題效果 </li> <li class="aui-list-view-cell"> <i class="aui-iconfont aui-icon-shop aui-bg-success"></i>單行列表標題效果 </li> </ul> </div> ``` ### 樣式四：卡片式文字列表 ![](https://box.kancloud.cn/2016-08-26_57bfcfd6862ad.png) 相關代碼如下： ``` <div class="aui-content-padded"> <ul class="aui-list-view"> <li class="aui-list-view-cell" data-win="list_arrow"> 卡片式單行列表標題效果 </li> <li class="aui-list-view-cell" data-win="list_thumb"> 卡片式單行列表標題效果 </li> <li class="aui-list-view-cell" data-win="list-image"> 卡片式單行列表標題效果 </li> </ul> </div> ``` ### 樣式五：卡片式文字列表 + 邊框 + 圓角 ![](https://box.kancloud.cn/2016-08-26_57bfcfd69e206.png) 相關代碼如下： ``` <div class="aui-card"> <ul class="aui-list-view"> <li class="aui-list-view-cell" data-win="list_arrow"> 卡片式單行列表標題效果 </li> <li class="aui-list-view-cell" data-win="list_thumb"> 卡片式單行列表標題效果 </li> <li class="aui-list-view-cell" data-win="list-image"> 卡片式單行列表標題效果 </li> </ul> </div> ``` ### 樣式六：卡片式文字列表 + 無邊框 + 圓角 ![](https://box.kancloud.cn/2016-08-26_57bfcfd6bb186.png) 相關代碼如下： ``` <div class="aui-card aui-noborder"> <ul class="aui-list-view"> <li class="aui-list-view-cell" data-win="list_arrow"> 卡片式單行列表標題效果 </li> <li class="aui-list-view-cell" data-win="list_thumb"> 卡片式單行列表標題效果 </li> <li class="aui-list-view-cell" data-win="list-image"> 卡片式單行列表標題效果 </li> </ul> </div> ``` ### 樣式七：文字列表 + 描述 + 評論 + 時間 ![](https://box.kancloud.cn/2016-08-25_57beba4fd33d4.png) 相關代碼如下： ``` <div class="aui-content"> <ul class="aui-list-view"> <li class="aui-list-view-cell aui-img"> <div class="aui-img-body"> <div class="aui-ellipsis-1">頭條信息標題頭條信息標題頭條信息標題頭條信息標題</div> <p class='aui-ellipsis-2'>頭條信息描述頭條信息描述頭條信息描述頭條信息描述頭條信息描述</p> </div> <div class="aui-col-xs-12 aui-clearfix other-info"> <div class="aui-line-x"></div> <p>888條評論 10分鐘前</p> </div> </li> </ul> </div> ```