ionic カード

近年、カード（card）の応用がますます普及しており、カードは情報をより整理して表示するためのツールを提供します。

モバイル端末向けアプリでは、カードは画面サイズに応じて自動的にサイズが調整されます。

カードの表示効果を柔軟に制御でき、アニメーション効果も実現できます。

カードは通常、ページの上部に配置されますが、左右に切り替える機能も実現できます。

<div class="card">
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
</div>

試してみる »

カード（card）のデフォルトスタイルにはbox-shadow（影）がありますが、パフォーマンス上の理由から、これに似た要素である list や list-inset には影がありません。

多数のカードがあり、各カードに多くの子要素がある場合は、内蔵リスト（inset list）の使用をお勧めします。

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

item-divider クラスを追加することで、カードにヘッダーとフッターを追加できます：

<div class="card">
  <div class="item item-divider">
    卡片头部！
  </div>
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
  <div class="item item-divider">
    卡片底部！
  </div>
</div>

試してみる »

カードリスト

list card クラスを使用してカードリストを設定します：

<div class="list card">

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address
  </a>

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-ios-telephone"></i>
    Enter phone number
  </a>

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="../index.html" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

</div>

試してみる »

画像付きカード

カードに画像を使用すると、効果はより良くなります。例は以下の通りです：

<div class="list card">

  <div class="item item-avatar">
    <img src="avatar.jpg.html">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img src="cover.jpg.html">
  </div>

  <a class="item item-icon-left assertive" href="../index.html">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>

試してみる »

実行結果は以下の通りです：

カードの表示

以下の例では、いくつかの異なるオプションによるカード表示方法を使用しています。最初に list card 要素を使用し、item-avatar、item-body 要素を画像やテキスト情報の表示に使用し、下部では item-divider クラスを使用しています。

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg.html">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg.html">
    <p>
      サンプル -- 学的不仅是技术，更是梦想！<br>
      サンプル -- 学的不仅是技术，更是梦想！<br>
      サンプル -- 学的不仅是技术，更是梦想！<br>
      サンプル -- 学的不仅是技术，更是梦想！
    </p>
    <p>
      <a href="../index.html" class="subdued">1 喜欢</a>
      <a href="../index.html" class="subdued">5 评论</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="../index.html">
      <i class="icon ion-thumbsup"></i>
      喜欢
    </a>
    <a class="tab-item" href="../index.html">
      <i class="icon ion-chatbox"></i>
      评论
    </a>
    <a class="tab-item" href="../index.html">
      <i class="icon ion-share"></i>
      分享
    </a>
  </div>

</div>

試してみる »

実行結果は以下の通りです：

その他の拡張