Ionic-リスト

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

イオンリストの作成

すべてのリストは2つの要素で作成されます。基本的なリストを作成したいとき<ul> タグには list 割り当てられたクラス、および <li> タグはを使用します itemクラス。もう一つの興味深いことは、あなたが使う必要さえないということです<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-insets あなたの後 listクラス。これにより、マージンが追加され、コンテナのリストサイズが調整されます。

<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このためのクラス。繰り返しますが、他のすべてのイオン要素と同様に、追加する必要がありますitem-divider 後のクラス itemクラス。アイテムの仕切りは、デフォルトで他のリストアイテムよりもスタイルが強いため、リストヘッダーとして役立ちます。

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

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