手册

ionic 教程 ionic 安装 ionic 创建 APP

ionic CSS

ionic 头部与底部 ionic 按钮 ionic 列表 ionic 卡片 ionic 表单和输入框 ionic Toggle ionic checkbox ionic 单选框 ionic Range ionic select ionic tab(选项卡) ionic 网格(Grid) ionic 颜色 ionic icon(图标)

ionic 卡片

阅读27907

更新时间2022-04-11

ionic 列表

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

卡片展现

以下实例中使用几种不同的选项的卡片展现方式。开始使用了 list card 元素，并使用了 item-avatar , item-body 元素用于展示图片和文本信息，底部使用 item-divider 类。

November 05, 1955

      php中文网 -- 学的不仅是技术，更新梦想！
      php中文网 -- 学的不仅是技术，更新梦想！
      php中文网 -- 学的不仅是技术，更新梦想！
      php中文网 -- 学的不仅是技术，更新梦想！

1 喜欢 5 评论

喜欢

Comment

运行效果如下：

关于我们免责申明意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群