イオン-リスト

リスト*は、Webまたはモバイルアプリケーションで最も人気のある要素の1つです。これらは通常、さまざまな情報を表示するために使用されます。これらを他のHTML要素と組み合わせて、異なるメニュー、タブを作成したり、純粋なテキストファイルの単調さを破ったりすることができます。 Ionicフレームワークには、さまざまなリストタイプが用意されており、簡単に使用できます。

イオンリストの作成

すべてのリストは2つの要素で作成されます。基本リストを作成する場合、 <ul> タグには list クラスを割り当てる必要があり、 <li> タグは item クラスを使用します。もう1つの興味深い点は、リストに <ul> 、 <ol> 、および <li> タグを使用する必要さえないことです。他の要素も使用できますが、重要なのは list クラスと item クラスを適切に追加することです。

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

上記のコードは、次の画面を生成します-

イオンリスト

差し込みリスト

独自のコンテナを満たすためにリストが必要な場合は、 list クラスの後に list-insets を追加できます。これによりマージンが追加され、リストのサイズがコンテナに合わせて調整されます。

<div class = "list list-inset">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

上記のコードは、次の画面を生成します-

イオンリストインセット

アイテムディバイダー

仕切りは、いくつかの要素を論理グループに編成するために使用されます。 Ionicはこのために item-divider クラスを提供します。繰り返しますが、他のすべてのIonic要素と同様に、 item クラスの後に item-divider クラスを追加するだけです。アイテム区切り線は、デフォルトで他のリストアイテムよりもスタイルが強いため、リストヘッダーとして便利です。

<div class = "list">
   <div class = "item item-divider">Item Divider 1</div>
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>

   <div class = "item item-divider">Item Divider 2</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
</div>

上記のコードは、次の画面を生成します-

イオンアイテムディバイダー

アイコンを追加する

ボタンにアイコンを追加する方法は既に説明しました。リストアイテムにアイコンを追加するときは、アイコンを配置する面を選択する必要があります。これには item-icon-left および item-icon-right クラスがあります。両側にアイコンを配置する場合は、これら2つのクラスを組み合わせることもできます。最後に、アイテムにテキストメモを追加する item-note クラスがあります。

<div class = "list">
   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      Left side Icon
   </div>

   <div class = "item item-icon-right">
      <i class = "icon ion-star"></i>
      Right side Icon
   </div>

   <div class = "item item-icon-left item-icon-right">
      <i class = "icon ion-home"></i>
      <i class = "icon ion-star"></i>
      Both sides Icons
   </div>

   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      <span class = "text-note">Text note</span>
   </div>
</div>

上記のコードは、次の画面を生成します-

イオン項目アイコン

アバターとサムネイルの追加

アバターとサムネイルは似ています。主な違いは、アバターがサムネイルよりも小さいことです。これらのサムネイルはリストアイテムのほぼ全高をカバーしていますが、アバターは中くらいのサイズの円形の画像です。使用されるクラスは item-avatar および item-thumbnail です。以下のサムネイルコード例に示すように、アバターとサムネイルをどちら側に配置するかを選択することもできます。

<div class = "list">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h3>Avatar</h3>
   </div>

   <div class = "item item-thumbnail-left">
      <img src = "my-image.png">
      <h3>Thumbnail</h3>
   </div>
</div>

上記のコードは、次の画面を生成します-

イオンアバターのサムネイル

Ionic-lists

目次

イオン-リスト