ionic 卡片

近年来卡片(card)的应用越来越流行，卡片提供了一个更好组织信息展示的工具。

针对移动端的应用，卡片会根据屏幕大小自适应大小。

我们可以很灵活的控制卡片的显示效果，甚至实现动画效果。

卡片一般放在页面顶部，当然也可以实现左右切换的功能。

  

    基本卡片，包含了文本信息。
  

默认情况下，卡片（card）这类元素会带上 box-shadow（阴影）效果。至于像 list、list-inset 这类视觉上有些相近的元素，则没有默认加阴影，原因也很直接：主要还是出于性能方面的考虑。

如果你有很多的卡片，每个卡片都有很多子元素，建议使用内嵌列表（inset list）。

卡片的头部与底部

我们可以通过添加 item-divider 类为卡片添加头部与底部：

  

    卡片头部！
  
  

    基本卡片，包含了文本信息。
  
  

    卡片底部！
  

卡片列表

使用 list card 类来设置卡片列表：

    
    Enter home address
  

    
    Enter phone number
  

    
    Enter wireless password
  

    
    Enter card information
  

带图片卡片

卡片中使用图片，效果会更好，实例如下：

    
    
Pretty Hate Machine
    
Nine Inch Nails
  

    
  

    
    Start listening
  

运行效果如下：

卡片展现

下面这个示例展示了几种不同配置下的卡片呈现方式。起步部分先用了 list card 元素，再配合 item-a vatar 和 item-body 来承载图片与文本内容，卡片底部则通过 item-divider 类做分隔处理。

    
    
Marty McFly
    
November 05, 1955
  

    
    

      菜鸟教程 -- 学的不仅是技术，更是梦想！

      菜鸟教程 -- 学的不仅是技术，更是梦想！

      菜鸟教程 -- 学的不仅是技术，更是梦想！

      菜鸟教程 -- 学的不仅是技术，更是梦想！
    
    

      1 喜欢
      5 评论
    
  

    
      
      喜欢
    
    
      
      评论
    
    
      
      分享
    
  

运行效果如下：