当前位置:

首页 > 系统应用 > ionic 卡片

ionic 卡片

近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具。 针对移动端的应用,卡片会根据屏幕大小自适应大小。 我们可以很灵活的控制卡片的显示效果,甚至实现动画效果。 卡片一般放在页面顶部,当然也可以实现左右切换的功能。 基本卡片,包含了文本信息。 默认情况下,卡片(card)这类

本文目录

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

    ionic 卡片

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

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

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

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

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

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

    卡片的头部与底部

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

    卡片头部!
    基本卡片,包含了文本信息。
    卡片底部!

    卡片列表

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

    带图片卡片

    卡片中使用图片,效果会更好,实例如下:

    Pretty Hate Machine

    Nine Inch Nails

    Start listening

    运行效果如下:

    卡片展现

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

    Marty McFly

    November 05, 1955

    菜鸟教程 -- 学的不仅是技术,更是梦想!
    菜鸟教程 -- 学的不仅是技术,更是梦想!
    菜鸟教程 -- 学的不仅是技术,更是梦想!
    菜鸟教程 -- 学的不仅是技术,更是梦想!

    1 喜欢 5 评论

    运行效果如下:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
    作者最新文章
    系统应用
    下一篇: ionic 列表
    相关文章 更多
    ionic 教程
    ionic 教程

    ionic 是一套相当成熟的 HTML5 应用开发框架(HTML5 Hybrid Mobile App Framework)。 它的价值就在于,能够把 HTML、CSS 和 Ja vascript 这些常见的 Web 技术,真正用到移动应用开发里,做出体验上尽可能贴近原生应用的产品。 ionic 主

    ionic 安装
    ionic 安装

    本站实例采用了ionic v1.3.2 版本,使用的 CDN 库地址: ionic 最新版本下载地址:http://ionicframework.com/docs/overview/#download。 下载后解压压缩包,包含以下目录: css/ => 样式文件 fonts/ => 字体文件 js/

    ionic 创建 APP
    ionic 创建 APP

    前面的章节中我们已经学会了 ionic 框架如何导入到项目中。 接下来我们将为大家介绍如何创建一个 ionic APP 应用。 ionic 创建 APP 使用 HTML、CSS 和 Ja vascript 来构建,所以我们可以创建一个 www 目录,并在目录下创建 index.html 文件,代码如

    ionic 头部与底部
    ionic 头部与底部

    Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。 ionic 默认提供了许多种颜色样式,你可以调用不同的样式名,当然也可以自定义一个。 bar-light bar-light bar-stable bar-stable bar-positive bar-pos

    ionic 按钮
    ionic 按钮

    按钮是移动app不可或缺的一部分,不同风格的app,需要的不同按钮的样式。 默认情况下,按钮显示样式为:display: inline-block。 Default button-light button-stable button-positive button-calm button-balan

    ionic 列表
    ionic 列表

    列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到。 列表可以是基本文字、按钮,开关,图标和缩略图等。 列表项可以是任何的HTML元素。容器元素需要list类,每个列表项需要使用item类。 ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项

    ionic 表单和输入框
    ionic 表单和输入框

    list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。 输入框属性:placeholder 来看这个例子:这里的输入框默认都会撑满 100% 宽度,也就是左右两侧不带边框;同时,通过 placeholder 属性给输入字段预先放上一段提示文字,方便用

    ionic toggle(切换开关)
    ionic toggle(切换开关)

    切换开关和 HTML 里的 checkbox 标签本质上很接近,不过在移动设备上,它用起来通常更顺手,交互体验也更自然。 切换开关可以使用 toggle-assertive 来指定颜色。 这个示例展示的是一组可切换的开关列表。需要注意的是,每个选项除了保留 item 类之外,还必须额外加上 item

    ionic range
    ionic range

    ionic Range 本质上就是一个滑块控件,ionic 也顺手给它准备了不少开箱即用的默认样式。更方便的是,这个组件的适配性很高,不管是放在列表里,还是用在 Card 这类元素中,都能直接使用。 实例 Ranges In A List 实际运行后的效果如下所示:

    ionic select
    ionic select

    和原生的 select 比起来,ionic select 在外观上确实更精致,也更符合整体界面的视觉风格。不过真正弹出来的可选项样式,走的仍然是浏览器默认那一套。 不同平台里,这类可选项的呈现方式并不统一:在 PC 端浏览器中,通常看到的是传统的下拉菜单;到了 Android 上,一般会弹出单选按钮

    查看更多
    精品专题 更多
    装机必备
    装机必备

    正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

    Windows
    Windows

    正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

    PDF教程
    PDF教程

    正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法,同时介绍常用PDF软件和工具的使用技巧。

    Mac软件 更多
    讯飞智作 网页版
    讯飞智作 网页版
    Windows/ macOS/ Linux

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版
    Windows/ macOS/ Linux

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    Aperty macOS版
    Aperty macOS版
    macOS

    Aperty 是 Skylum 推出的 AI 人像修图软件,支持自然肤质修饰、瑕疵处理、面部与身体调整、预设及批量同步。

    WINDOWS 更多
    讯飞智作 网页版
    讯飞智作 网页版
    Windows/ macOS/ Linux

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版
    Windows/ macOS/ Linux

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    PixTV 网页版
    PixTV 网页版
    Windows

    PixTV 是一款在浏览器中使用的 AI 视觉内容创作平台,提供图片、视频、音频、文字生成、AI 分镜、局部重绘、提示词反推和无限画布等工具,适合短剧、漫剧、广告及社交媒体内容制作。