Ionic-cards

イオン-カード

モバイルデバイスの画面サイズは小さいため、カードは情報を表示するのに最適な要素の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>

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

Ionic Complete Card