# 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>
```
- ionic 入門
- ionic 簡介
- ionic 安裝
- ionic 創建 APP
- ionic CSS
- ionic 頭部與底部
- ionic 按鈕
- ionic 列表
- ionic 卡片
- ionic 表單和輸入框
- ionic Toggle(切換開關)
- ionic 單選框
- ionic Range
- ionic select
- ionic tab(選項卡)
- ionic 網格(Grid)
- ionic 顏色
- ionic icon(圖標)
- ionic JavaScript
- ionic 上拉菜單(ActionSheet)
- ionic 背景層
- ionic 下拉刷新
- ionic 復選框
- ionic 單選框操作
- ionic 切換開關操作
- ionic 手勢事件
- ionic 頭部和底部
- ionic 列表操作
- ionic 加載動作
- ionic 模型
- ionic 導航
- ionic 平臺
- ionic 浮動框
- ionic 對話框
- ionic 滾動條
- ionic 側欄菜單
- ionic 滑動框
- ionic 加載動畫
- ionic 選項卡欄操作