Ionic卡片

由于移动设备具有较小的屏幕尺寸，因此卡是用于显示将感觉用户友好的信息的最佳元素之一。在上一章中，我们讨论了如何插入列表。卡片与插入列表非常相似，但它们提供了一些额外的阴影，可以影响较大列表的性能。

添加卡片

可以通过向元素添加卡类来创建默认卡。卡片通常与项目类一起形成列表。其中一个最有用的类是 item-text-wrap。这将有助于你有太多的文字，所以你想把它包装在你的卡内。以下示例中的第一张卡没有分配 item-text-wrap 类，但第二张卡正在使用它。

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

上面的代码将生成以下屏幕 -

Ionic卡

卡页眉和页脚

在上一章中，我们已经讨论了如何使用 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>

上面的代码将生成以下屏幕

Ionic卡元素

完整卡

您可以在卡片顶部添加任何元素。在下面的示例中，我们将向您展示如何将 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完整卡