ionic入門之色彩、表徵圖、邊距和介面組件：列表，ionic入門

ionic入門之色彩、表徵圖、邊距和介面組件：列表，ionic入門

目錄：

介面組件：列表

色彩

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><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 : 嵌入頭像

很多社交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中很常見：