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>

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！