- 色彩、圖標和邊距
- 色彩
- 圖標
- 內邊距
- 界面組件：列表
- 列表：.list
- 成員容器：.item
- .item: 嵌入文本
- .item : 嵌入圖標
- .item : 嵌入頭像
- .item : 嵌入縮略圖
- .item : 嵌入大圖
色彩
ionic定義了九種前景/背景/邊框的色彩樣式，：
可以在任何元素上使用這些樣式設置前景和背景顏色：
<any class="positive-bg energized"> ... </any> ### 圖標 ionic使用ionicons圖標樣式庫。ionicons采用了TrueType 字體實現圖標樣式，有超過500個圖標可供選擇。使用圖標很簡單，在元素上聲明以下兩個CSS類即可：
-
.icon - 將元素聲明為圖標
-
.ion-{icon-name} - 聲明要使用的具體圖標 通常使用i元素定義圖標，例如下面聲明了元素顯示ion-home圖標：
要了解有哪些圖標及具體名稱，需要訪問ionics.com。 點擊某個圖標即可查看其CSS類名稱。
可以在任何元素中插入圖標，使用元素的font-size樣式指定圖標的大小：
<any style="font-size:100px;"> </any> ### 內邊距 ionic定義了常用的內邊距樣式：
樣式名很直白，邊距統一為10px。可以在任何元素上應用這些樣式。
列表 : .list
列表非常適合於手機屏幕上的信息的顯示。使用.list定義列表容器， 使用.item定義列表成員：
<any class="list"> <any class="item">...</any> <any class="item">...</any> <any class="item">...</any> <any class="item">...</any> </any>對列表外觀的定制化主要集中在.item元素上，.list元素僅有 少數的幾個樣式定義：
成員容器 : .item
列表的樣式定制主要發生在.item元素上。在.item元素內， 可以插入文本、徽章、圖標、圖像（頭像、縮略圖或大圖）、按鈕等各種 樣式的元素：
PS:圖片中“徽章”應為badge。示例
.item : 嵌入文本
列表成員中經常需要顯示不同規格的文本，比如今日頭條的新聞列表：
.item元素可以使用h1~h6/p標簽插入不同規格的文本。
.item : 嵌入圖標
列表成員的內容中插入圖標，比單純的文字更加生動：
要插入圖標，需要滿足兩個條件：
- 在.item元素上聲明圖標位置。圖標可以位於列表的左側或右側， 分別使用.item-icon-left和.item-icon-right聲明
- 在.item元素內插入圖標。
.item : 嵌入頭像
很多社交App中，一個相當固定的UI模式是包含用戶頭像的信息列表：
在ionic中，頭像被設置為40x40固定大小。和插入圖標類似，向.item 中插入頭像需要滿足兩個條件：
1.在.item元素上聲明頭像位置。頭像可以位於列表的左側或右側， 分別使用.item-avatar-left和.item-avatar-right聲明 2.在.item元素內使用img標簽插入頭像。
.item : 嵌入縮略圖
回到今日頭條的新聞列表，我們給它加上兩張新聞圖片：
在ionic中，縮略圖被定義為80px大小，比頭像大，適合新聞圖片。 和插入頭像類似，向.item中插入縮略圖需要滿足兩個條件：
在.item元素上聲明縮略圖位置。縮略圖可以位於列表的左側或右側， 分別使用.item-thumbnail-left和.item-thumbnail-right聲明 在.item元素內使用img標簽插入頭像。 注意：將img標簽放到.item內容的開頭！
.item : 嵌入大圖
大圖非常有沖擊力，在圖片類App中很常見：
標簽: ionic, ionic入門