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>

以上程式碼將生成以下螢幕：