イオン-カード

モバイルデバイスは画面サイズが小さいため、カードはユーザーフレンドリーな情報を表示するための最良の要素の1つです。前の章では、リストを挿入する方法について説明しました。カードは挿入リストに非常に似ていますが、より大きなリストのパフォーマンスに影響を与える可能性のある追加のシャドウイングを提供します。

カードの追加

デフォルトのカードは、を追加することで作成できます cardあなたの要素へのクラス。カードは通常、リストとして形成されます。itemクラス。最も便利なクラスの1つはitem-text-wrap。これは、テキストが多すぎる場合に役立ちます。そのため、テキストをカード内にラップする必要があります。次の例の最初のカードには、item-text-wrap クラスが割り当てられましたが、2番目はそれを使用しています。

<div class = "card">
   <div class = "item">
      This is a Ionic card without item-text-wrap class.
   </div>
   
   <div class = "item item-text-wrap">
      This is a Ionic card with item-text-wrap class.
   </div>
</div>

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

カードヘッダーとフッター

前の章では、の使用方法についてすでに説明しました。 item-dividerリストをグループ化するためのクラス。このクラスは、カードを操作してカードヘッダーを作成するときに非常に役立ちます。次のコードに示すように、同じクラスをフッターに使用できます。

<div class = "card list">
   <div class = "item item-divider">
      Card header
   </div>
   
   <div class = "item item-text-wrap">
      Card text...
   </div>
   
   <div class = "item item-divider">
      Card Footer
   </div>
</div>

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

完全なカード

カードの上に任意の要素を追加できます。次の例では、の使用方法を示します。full-image 一緒にクラス item-body カード内に見栄えの良いウィンドウ画像を取得します。

<div class = "card">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h2>Card Name</h2>
   </div>

   <div class = "item item-body">
      <img class = "full-image" src = "my-image.png">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget 
      pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci. 
      Nam tristique elit massa, quis faucibus augue finibus ac.
   </div>
</div>

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