ionic リスト
リストは広く使われているUI要素であり、ほとんどすべてのモバイルアプリで使用されています。
リストには、基本的なテキスト、ボタン、トグル、アイコン、サムネイルなどを含めることができます。
リスト項目には任意の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="../index.html">
Butterfinger
</a>
...
</div>
アイコン付きリスト
リスト項目の左側または右側にアイコンを指定できます。
item-icon-leftを使用するとアイコンが左側に、item-icon-rightを使用すると右側に配置されます。両側にアイコンが必要な場合は、両方のクラスを追加します。
次の例では、リスト項目に<a>タグを使用して、各リスト項目をクリック可能にしています。
リスト項目で<a>または<button>要素を使用する場合、右側にアイコンが追加されていないと、自動的に矢印が追加されます。
例では、最初の項目は左側にのみアイコンがあり、2番目の項目は左右両方にアイコンがあり、3番目の項目には右側にアイコン（さらに注釈 item-note）があり、4番目の項目にはバッジ（badge）要素があります。
<div class="list">
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="../index.html">
<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="../index.html">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="../index.html">
<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="../index.html">
<img src="venkman.jpg.html">
<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="../index.html">
<img src="cover.jpg.html">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
...
</div>
インセットリスト (inset list)
リストをコンテナ内に埋め込むことができ、リストは全幅では表示されません。
インセットリストのスタイルは "list list-inset" です。通常のリストとの違いは、マージン（margin）が設定されていることで、タブに似ています。
インセットリストには影の効果がないため、スクロール時のパフォーマンスが良くなります。
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
...
</div>
その他の拡張