イオンリスト

List は広く使用されているインターフェイス要素であり、ほぼすべてのモバイル アプリで使用されています。

リストには、基本的なテキスト、ボタン、スイッチ、アイコン、サムネイルなどが含まれます。

リスト項目には、任意の HTML 要素を使用できます。コンテナ要素にはリスト クラスが必要で、各リスト項目には項目クラスが必要です。

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> 要素が使用されている場合、右側にアイコンが追加されていない場合は、上矢印が自動的に追加されます。

この例では、最初の項目には左側にアイコンのみがあり、2 番目の項目には左右にアイコンがあり、3 番目の項目には右側にアイコン (およびメモ項目 - ノート) があり、4 番目の項目にはアイコンが付いています。バッジ要素があります。

<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="../style/images/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="../style/images/cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

    ...

</div>

インセットリスト

リストをコンテナに埋め込むことができますが、リストは全幅表示されません。

インラインリストのスタイルは list list-inset です。通常のリストとの違いは、タブのようなマージン (marign) があることです。

インラインリストには影効果がなく、スクロールすると効果が良くなります。