ionic入門之色彩、圖標、邊距和界面組件：列表

轉載聲明，本文章來自 http://cnodejs.org/topic/551b516c33e515e67640631e

目錄：

1. 色彩、圖標和邊距
   1. 色彩
   2. 圖標
   3. 內邊距
2. 界面組件：列表
   1. 列表：.list
   2. 成員容器：.item
   3. .item: 嵌入文本
   4. .item : 嵌入圖標
   5. .item : 嵌入頭像
   6. .item : 嵌入縮略圖
   7. .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 : 嵌入圖標

列表成員的內容中插入圖標，比單純的文字更加生動：

要插入圖標，須要知足兩個條件：

1. 在.item元素上聲明圖標位置。圖標能夠位於列表的左側或右側， 分別使用.item-icon-left和.item-icon-right聲明
2. 在.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入門