跳到主要内容
版本:v7

UI 组件

Ionic 应用由称为组件的高级构建块构成,它们让你可以快速构建应用的 UI。Ionic 内置了许多组件,包括卡片、列表和标签。熟悉基础知识后,请参阅API 索引获取每个组件和子组件的完整列表。

手风琴

手风琴在内容中提供可折叠部分,以减少垂直空间,同时提供组织和分组信息的方式。

操作列表

操作列表显示一组选项,具有确认或取消操作的能力。

警告框

警告框是为用户提供选择特定操作或操作列表能力的好方法。

徽章

徽章是一种小型组件,通常向用户传达数值信息。

面包屑

面包屑是用于指示用户在应用中的当前位置的导航项。

按钮

按钮让用户执行操作。它们是与应用交互和导航的重要方式。

卡片

卡片是显示重要内容片段的好方法,可以包含图像、按钮、文本等。

复选框

复选框可用于让用户了解他们需要做出二元决策。

纸片

纸片是一种显示数据或操作的紧凑方式。

内容

内容是与应用交互和导航的典型方式。

日期和时间选择器

日期和时间选择器用于呈现一个界面,使用户可以轻松选择日期和时间。

浮动操作按钮

浮动操作按钮是在屏幕上执行主要操作的圆形按钮。

网格

网格是一个强大的移动优先系统,用于构建自定义布局。

图标

专为 Web、iOS 和 Android 应用设计的精美图标。

无限滚动

无限滚动允许你在用户滚动应用时加载新数据。

输入

输入为用户在应用中输入数据提供了一种方式。

项目

项目是可以包含文本、图标、头像、图像、输入以及任何其他原生或自定义元素的元素。 项目可以滑动、删除、重新排序、编辑等。

列表

列表可以显示信息行,如联系人列表、播放列表或菜单。

媒体

一组媒体组件,包括头像、图标、图像和缩略图,旨在增强视觉内容。

菜单

菜单是一种常见的导航模式。它们可以永久显示在屏幕上,或在需要时显示。

模态框

模态框滑入和滑出屏幕以显示临时 UI,通常用于登录或注册页面。

导航

导航是用户在你的应用中的不同页面之间移动的方式。

弹出框

弹出框提供了一种无需更改上下文即可呈现信息或选项的简便方式。

进度指示器

进度指示器可视化操作或活动的进度。

单选按钮

单选输入允许你呈现一组互斥的选项。

范围

范围滑块让用户通过沿轨道拖动旋钮来选择值。

刷新器

刷新器在内容组件上提供下拉刷新功能。

重新排序

重新排序让用户通过拖放来重新排序项目列表。

路由

路由允许基于当前路径进行导航。

搜索栏

搜索栏用于搜索或过滤项目,通常来自工具栏。

分段控件

分段控件提供一组互斥的按钮,可用作筛选器或视图切换器。

选择器

选择类似于原生 HTML select,在排序和选择方面有一些改进。

标签

标签启用标签式导航,这是现代应用中的标准导航模式。

Toast

Toast 是出现在应用内容上方的微妙通知,不会中断用户交互。

切换开关

切换开关是二元选项的输入,通常用于选项和开关。

工具栏

工具栏用于容纳与应用相关的信息和操作。

排版

文本用于设置应用中文本的样式或更改颜色。