# ionic 卡片
近年來卡片(card)的應用越來越流行,卡片提供了一個更好組織信息展示的工具。
針對移動端的應用,卡片會根據屏幕大小自適應大小。
我們可以很靈活的控制卡片的顯示效果,甚至實現動畫效果。
卡片一般放在頁面頂部,當然也可以實現左右切換的功能。
```
<div class="card">
<div class="item item-text-wrap">
基本卡片,包含了文本信息。
</div>
</div>
```
卡片(card)默認樣式帶有box-shadow(陰影),由于性能的原因,和他類似的元素像 list list-inset 并沒有陰影。
如果你有很多的卡片,每個卡片都有很多子元素,建議使用內嵌列表(inset list)。
## 卡片的頭部與底部
我們可以通過添加 item-divider 類為卡片添加頭部與底部:
```
<div class="card">
<div class="item item-divider">
卡片頭部!
</div>
<div class="item item-text-wrap">
基本卡片,包含了文本信息。
</div>
<div class="item item-divider">
卡片底部!
</div>
</div>
```
## 卡片列表
使用 list card 類來設置卡片列表:
```
<div class="list card">
<a href="#" class="item item-icon-left">
<i class="icon ion-home"></i>
Enter home address
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-ios-telephone"></i>
Enter phone number
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-wifi"></i>
Enter wireless password
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-card"></i>
Enter card information
</a>
</div>
```
## 帶圖片卡片
卡片中使用圖片,效果會更好,實例如下:
```
<div class="list card">
<div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-image">
<img src="cover.jpg">
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-music-note"></i>
Start listening
</a>
</div>
```
運行效果如下:

## 卡片展現
以下實例中使用幾種不同的選項的卡片展現方式。 開始使用了 list card 元素,并使用了 item-avatar , item-body 元素用于展示圖片和文本信息,底部使用 item-divider 類。
```
<div class="list card">
<div class="item item-avatar">
<img src="mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" src="delorean.jpg">
<p>
菜鳥教程 -- 學的不僅是技術,更新夢想!<br>
菜鳥教程 -- 學的不僅是技術,更新夢想!<br>
菜鳥教程 -- 學的不僅是技術,更新夢想!<br>
菜鳥教程 -- 學的不僅是技術,更新夢想!
</p>
<p>
<a href="#" class="subdued">1 喜歡</a>
<a href="#" class="subdued">5 評論</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
喜歡
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
分享
</a>
</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 選項卡欄操作