ionic-CSS：ionic 列表
| ylbtech-ionic-CSS：ionic 列表 |
?
| 1.返回頂部 |
ionic 列表
列表是一個應用廣泛的界面元素，在所有移動app中幾乎都會使用到。
列表可以是基本文字、按鈕，開關，圖標和縮略圖等。
列表項可以是任何的HTML元素。容器元素需要list類，每個列表項需要使用item類。
ionList和ionItem可以很容易的支持各種交互方式，比如，滑動編輯，拖動排序，以及刪除項。
基本用法:
<ul class="list"> <li class="item"> ... </li> </ul>嘗試一下 ?
列表分隔符
我們可以使用 item-divider 類來為列表創建分隔符，默認情況下，列表項以不同的背景顏色和字體加粗來區分，但你也可以很容易的定制他。
<div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> ... </div>嘗試一下 ?
帶圖標列表
我們可以在列表項的左側或右側指定圖標。
使用 item-icon-left 圖標在左側， item-icon-right 設置圖標在右側。如果你需要在兩邊都有圖標，則兩個類都添加上即可。
以下實例中，我們在列表項中使用了 <a> 標簽，使得每個列表項可點擊。
列表項在使用 <a>或<button> 元素時，如果右側未添加圖標，則會自動添加上箭頭號。
實例中，第一項只有左側圖標，第二項左右均有圖標，第三項有右側圖標（還有注釋 item-note），第四項有badge（標記）元素。
<div class="list"> <a class="item item-icon-left" href="#"> <i class="icon ion-email"></i> Check mail </a> <a class="item item-icon-left item-icon-right" href="#"> <i class="icon ion-chatbubble-working"></i> Call Ma <i class="icon ion-ios-telephone-outline"></i> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album <span class="item-note"> Grammy </span> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> </div>嘗試一下 ?
按鈕列表
使用 item-button-right 或 item-button-left 類將按鈕放在列表項中。
<div class="list"> <div class="item item-button-right"> Call Ma <button class="button button-positive"> <i class="icon ion-ios-telephone"></i> </button> </div> ... </div>嘗試一下 ?
帶頭像列表
使用 item-avatar 來創建一個帶頭像的列表：
<div class="list"> <a class="item item-avatar" href="#"> <img src="venkman.jpg"> <h2>Venkman</h2> <p>Back off, man. I'm a scientist.</p> </a> ... </div>嘗試一下 ?
縮略圖列表
item-thumbnail-left 類用于添加左側對齊的縮略圖， item-thumbnail-right 類用于添加右側對齊的縮略圖。
<div class="list"> <a class="item item-thumbnail-left" href="#"> <img src="cover.jpg"> <h2>Pretty Hate Machine</h2> <p>Nine Inch Nails</p> </a> ... </div>嘗試一下 ?
內嵌列表(inset list)
我們可以在容器當中內嵌列表，列表不會顯示完整的寬度。
內嵌列表的樣式為：list list-inset，與常規列表區別是，它設置了外邊距（marign）,類似于選項卡。
內嵌列表是沒有陰影效果的，滾動時效果會更好。
<div class="list list-inset"> <div class="item"> Raiders of the Lost Ark </div> ... </div>嘗試一下 ?
2、| 2.返回頂部 |
| 3.返回頂部 |
| 4.返回頂部 |
| 5.返回頂部 |
| 6.返回頂部 |
| 作者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。 |
轉載于:https://www.cnblogs.com/storebook/p/9003827.html
總結
以上是生活随笔為你收集整理的ionic-CSS：ionic 列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hashcode()方法和equals(
- 下一篇： WIN10安装scrapy/channe