离子 - 卡片

---

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

添加卡片

可以通过向元素添加卡类来创建默认卡。卡片通常形成为包含项目类别的列表。最有用的类之一是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>

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

卡片页眉和页脚

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

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

完整卡

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

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