列表 · Frozen UI

[TOC] ## 列表 list ### 簡單列表 ![](https://box.kancloud.cn/f4582a290abe013fa3a8108eaaaf5b0e_422x377.png) ~~~ <ul class="ui-list ui-list-pure ui-border-tb"> <li class="ui-border-t"> <p><span>1.faycheng </span><span class="date"> 2月12日</span></p> <h4>這本書太贊了，每次看都有不一樣的體會和感悟，超級喜歡！期待大結局。</h4> </li> <li class="ui-border-t"> <p><span>2.faycheng </span><span class="date"> 2月12日</span></p> <h4>標題標題標題標題標題標題題標題標題標題標題標題標題標題標題標題</h4> </li> <li class="ui-border-t"> <p><span>3.faycheng </span><span class="date"> 2月12日</span></p> <h4>標題標題標題標題標題標題題標題標題標題標題標題標題標題標題標題</h4> </li> </ul> ~~~ ### 右邊有內容的列表 ![](https://box.kancloud.cn/a0d20ba43390e2c53919edd552f70ff7_434x377.png) ~~~ <ul class="ui-list ui-list-text ui-border-tb"> <li class="ui-border-t"> <div class="ui-list-info"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> </div> <div class="ui-badge">new</div> </li> <li class="ui-border-t"> <div class="ui-list-info"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> </div> <div class="ui-badge-muted">new</div> </li> <li class="ui-border-t"> <div class="ui-list-info"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> </div> <div class="ui-badge-num">123</div> </li> <li class="ui-border-t"> <div class="ui-list-info"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> </div> <div class="ui-reddot ui-reddot-static"></div> </li> <li class="ui-border-t"> <div class="ui-list-info"> <h4>標題標題標題標題標題標題標</h4> </div> <div class="ui-list-action">使用中</div> </li> <li class="ui-border-t"> <div class="ui-list-info"> <h4>標題標題標題標題標題標題標</h4> </div> <label class="ui-switch"> <input type="checkbox"> </label> </li> </ul> ~~~ ### 文字列表 ![](https://box.kancloud.cn/067c64e64070f909b294af0b713a0e25_419x243.png) ~~~ <ul class="ui-list ui-list-text ui-list-link ui-border-tb"> <li class="ui-border-t"> <h4>長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字長文字</h4> <div class="ui-txt-info">男</div> </li> <li class="ui-border-t"> <h4 class="ui-nowrap">生日</h4> <div class="ui-txt-info">1988年8月8日</div> </li> </ul> ~~~ ### 圖文一行列表 ![](https://box.kancloud.cn/af78bf41106377f4e4c44a0a7cce985b_427x391.png) ~~~ <ul class="ui-list ui-list-one ui-list-link ui-border-tb"> <li class="ui-border-t"> <div class="ui-list-thumb"> <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">性別</h4> <div class="ui-txt-info">男</div> </div> </li> <li class="ui-border-t"> <div class="ui-list-thumb"> <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">生日</h4> <div class="ui-reddot ui-reddot-static"></div> </div> </li> </ul> <ul class="ui-list ui-list-one ui-list-link ui-border-tb"> <li> <div class="ui-list-thumb"> <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span> </div> <div class="ui-list-info ui-border-t"> <h4 class="ui-nowrap">性別</h4> <div class="ui-txt-info">男</div> </div> </li> <li> <div class="ui-list-thumb"> <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span> </div> <div class="ui-list-info ui-border-t"> <h4 class="ui-nowrap">生日</h4> <div class="ui-reddot ui-reddot-static"></div> </div> </li> </ul> ~~~ ### 圖文列表，active不再默認加上，用js加 ![](https://box.kancloud.cn/5c0643e9ffb90572c2207b3def024710_471x351.png) ~~~ <ul class="ui-list ui-list-link ui-border-tb"> <li class="ui-border-t active"> <div class="ui-list-thumb"> <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">ui-list-thumb縮略圖</h4> </div> </li> <li class="ui-border-t"> <div class="ui-list-thumb-s"> <span style="background-image:url(http://placeholder.qiniudn.com/56x56)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">ui-list-thumb-s縮略小圖</h4> </div> </li> <li class="ui-border-t"> <div class="ui-list-icon"> <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">ui-list-icon icon圖</h4> </div> </li> <li class="ui-border-t"> <div class="ui-list-icon"> <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">ui-list-icon icon圖</h4> </div> </li> </ul> ~~~ ### 通欄和默認帶active列表 ![](https://box.kancloud.cn/a4b270b96b10df16bc309e7dacb8767e_417x201.png) ~~~ <ul class="ui-list ui-list-text ui-list-active ui-list-cover ui-border-tb"> <li class="ui-border-t"> <p>加ui-list-active會帶按壓態</p> </li> <li class="ui-border-t"> <p>加ui-list-cover通欄</p> </li> </ul> ~~~ ### 圖文列表帶頭像 ![](https://box.kancloud.cn/aa76d479d246eef4ed4d2412eeefe9a4_432x251.png) ~~~ <ul class="ui-list ui-border-tb"> <li class="ui-border-t"> <div class="ui-avatar"> <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> <p class="ui-nowrap">這是內容，加ui-nowrap可以超出長度截斷</p> </div> </li> <li class="ui-border-t"> <div class="ui-avatar"> <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> <p class="ui-nowrap">這是內容，加ui-nowrap可以超出長度截斷</p> </div> </li> </ul> ~~~ ### 圖文列表帶頭像 ![](https://box.kancloud.cn/1af9a699475a09e89a40756cb828bff3_421x247.png) ~~~ <ul class="ui-list ui-list-link ui-border-tb"> <li> <div class="ui-avatar"> <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span> </div> <div class="ui-list-info ui-border-t"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> </div> </li> <li> <div class="ui-avatar"> <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span> </div> <div class="ui-list-info ui-border-t"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> <p class="ui-nowrap">這是內容，加ui-nowrap可以超出長度截斷</p> </div> </li> </ul> ~~~ ### 圖文列表帶小頭像 ![](https://box.kancloud.cn/871548c4a0b4332196ce73a08073ad0c_421x229.png) ~~~ <ul class="ui-list ui-list-function ui-list-link ui-border-tb"> <li class="ui-border-t"> <div class="ui-avatar-s"> <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> </div> <div class="ui-btn">PK</div> </li> <li class="ui-border-t"> <div class="ui-avatar-s"> <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> </div> <div class="ui-btn">PK</div> </li> </ul> ~~~ ### 圖文列表 ![](https://box.kancloud.cn/be8bfd5b213c6956ce470084411aebe0_469x328.png) ~~~ <ul class="ui-list ui-list-link ui-border-tb"> <li class="ui-border-t"> <div class="ui-list-img"> <span style="background-image:url(http://placeholder.qiniudn.com/200x136)"></span> </div> <div class="ui-list-info"> <h4 class="ui-nowrap">這是標題，加ui-nowrap可以超出長度截斷</h4> <p class="ui-nowrap">這是內容，加ui-nowrap可以超出長度截斷</p> </div> </li> <li class="ui-border-t"> <div class="ui-list-img"> <span style="background-image:url(http://placeholder.qiniudn.com/200x136)"></span> </div> <div class="ui-list-info"> <h4>標題標題標題標題標題標題標題標題標題標題標題</h4> </div> </li> </ul> <div class="ui-loading-wrap"> <p>加載中</p> <i class="ui-loading"></i> </div> ~~~