跳到主要内容
版本:v8

UI 组件

Ionic 应用由称为组件的高级构建块组成,它们能帮助你快速构建应用的用户界面。Ionic 内置了多种组件,包括卡片、列表和标签页。熟悉基础知识后,可以参考 API 索引 查看所有组件和子组件的完整列表。

手风琴

手风琴组件提供了可折叠的内容区域,可以在组织和分组信息的同时减少纵向空间占用。

操作表

操作表用于显示一组选项,并提供确认或取消操作的能力。

警告框

警告框是让用户选择特定操作或操作列表的理想方式。

徽章

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

面包屑

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

按钮

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

卡片

卡片是展示重要内容的绝佳方式,可以包含图像、按钮、文本等元素。

复选框

复选框可用于提示用户做出二元决策。

标签

标签是一种紧凑的数据或操作展示方式。

内容区域

内容区域是与应用交互和导航的核心方式。

日期时间选择器

日期时间选择器用于呈现直观的界面,让用户轻松选择日期和时间。

浮动操作按钮

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

网格布局

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

图标

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

无限滚动

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

输入框

输入框为用户在应用中输入数据提供了途径。

列表项

列表项是可以包含文本、图标、头像、图像、输入框以及其他原生或自定义元素的组件。列表项支持滑动、删除、重新排序、编辑等操作。

列表

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

媒体组件

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

菜单

菜单是常见的导航模式,可以常驻屏幕,也可以在需要时显示。

模态框

模态框从屏幕侧边滑入滑出,用于显示临时界面,常用于登录或注册页面。

导航

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

弹出框

弹出框提供了一种无需切换上下文即可展示信息或选项的便捷方式。

进度指示器

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

单选框

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

滑动条

滑动条让用户可以通过在轨道上拖动旋钮来选择数值。

下拉刷新

下拉刷新为内容组件提供了拉动刷新功能。

重新排序

重新排序功能允许用户通过拖放来调整列表项的顺序。

路由

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

搜索栏

搜索栏用于搜索或筛选项目,通常位于工具栏中。

分段器

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

选择器

选择器类似于原生 HTML 的 select 元素,但在排序和选择方面有所改进。

标签页

标签页实现了标签式导航,是现代应用中的标准导航模式。

轻提示

轻提示是在应用内容上方显示的微妙通知,不会中断用户交互。

开关

开关是用于二元选择的输入控件,常用于选项和切换功能。

工具栏

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

文字排版

文字组件用于在应用内设置文本样式或更改文本颜色。