Ionic - 卡片

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

添加卡片

可以通过向元素添加card类来创建默认卡片。卡片通常以带有item类的列表形式呈现。其中一个最有用的类是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>

以上代码将生成以下屏幕：

完整卡片

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

以上代码将生成以下屏幕：