Skip to main content

UI 组件

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

¥Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the API Index for a complete list of each component and sub-component.

动作表

操作表显示一组能够确认或取消操作的选项。

警报

警报是让用户能够选择特定操作或操作列表的好方法。

徽章

徽章是一个小组件,通常向用户传达数值。

按钮

按钮可让你的用户采取行动。 它们是与应用交互和导航的重要方式。

卡片

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

复选框

复选框可用于让用户知道他们需要做出二元决定。

碎屑

芯片是显示数据或操作的紧凑方式。

内容

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

日期和时间选择器

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

浮动操作按钮

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

图标

设计精美的图标,适用于 Web、iOS 和 Android 应用。

网格

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

无限滚动

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

输入

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

条目

项目是一个通用的 UI 容器,可以用作列表的一部分。

列表

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

导航

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

菜单

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

模态

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

弹出窗口

弹出窗口提供了一种无需更改上下文即可渲染信息或选项的简单方法。

进度指标

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

单选框

单选框输入允许你渲染一组专有选项。

刷新

Refresher 在内容组件上提供拉动刷新功能。

搜索栏

搜索栏用于通常从工具栏搜索或过滤项目。

重新排序

重新排序允许用户拖放以重新排序项目列表。

路由

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

片段

分段提供了一组专用按钮,可用作过滤器或视图切换器。

选择器

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

选项卡

选项卡支持选项卡式导航,这是现代应用中的标准导航模式。

吐司

Toast 用于在应用内容的顶部显示通知。 它可以是暂时的或可驳回的。

切换

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

工具栏

工具栏用于存放与你的应用相关的信息和操作。