ionic 列表

ionic 列表

列表是一個應(yīng)用廣泛的界面元素，在所有移動app中幾乎都會使用到。

列表可以是基本文字、按鈕，開關(guān)，圖標(biāo)和縮略圖等。

列表項(xiàng)可以是任何的HTML元素。容器元素需要list類，每個列表項(xiàng)需要使用item類。

ionList和ionItem可以很容易的支持各種交互方式，比如，滑動編輯，拖動排序，以及刪除項(xiàng)。

基本用法:

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

嘗試一下 ?

列表分隔符

我們可以使用 item-divider 類來為列表創(chuàng)建分隔符，默認(rèn)情況下，列表項(xiàng)以不同的背景顏色和字體加粗來區(qū)分，但你也可以很容易的定制他。

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

嘗試一下 ?

帶圖標(biāo)列表

我們可以在列表項(xiàng)的左側(cè)或右側(cè)指定圖標(biāo)。

使用 item-icon-left 圖標(biāo)在左側(cè)， item-icon-right 設(shè)置圖標(biāo)在右側(cè)。如果你需要在兩邊都有圖標(biāo)，則兩個類都添加上即可。

以下實(shí)例中，我們在列表項(xiàng)中使用了 <a> 標(biāo)簽，使得每個列表項(xiàng)可點(diǎn)擊。

列表項(xiàng)在使用 <a>或<button> 元素時，如果右側(cè)未添加圖標(biāo)，則會自動添加上箭頭號。

實(shí)例中，第一項(xiàng)只有左側(cè)圖標(biāo)，第二項(xiàng)左右均有圖標(biāo)，第三項(xiàng)有右側(cè)圖標(biāo)（還有注釋 item-note），第四項(xiàng)有badge（標(biāo)記）元素。

<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 類將按鈕放在列表項(xiàng)中。

<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 來創(chuàng)建一個帶頭像的列表：

<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 類用于添加左側(cè)對齊的縮略圖， item-thumbnail-right 類用于添加右側(cè)對齊的縮略圖。

<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>

嘗試一下 ?

內(nèi)嵌列表(inset list)

我們可以在容器當(dāng)中內(nèi)嵌列表，列表不會顯示完整的寬度。

內(nèi)嵌列表的樣式為：list list-inset，與常規(guī)列表區(qū)別是，它設(shè)置了外邊距（marign）,類似于選項(xiàng)卡。

內(nèi)嵌列表是沒有陰影效果的，滾動時效果會更好。

<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

    ...

</div>

嘗試一下 ?