组件

按层次组织的全部组件。

基础设施

组件之间共用的机制原语。

DisclosureIcon展开指示

随展开与收起旋转的指示物

Highlight高亮块

在活动条目之间平移的高亮块

Ripple涟漪

从按下位置扩散的涟漪反馈

VisuallyHidden视觉隐藏

只对屏幕阅读器可见的文字

排版

正文中的文字、代码、列表与引用的呈现方式。

Blockquote引用

引用他处的整段文字

Code行内代码

正文中的行内代码

CodeBlock代码块

成段的代码,带语法着色和复制按钮

DescriptionList描述列表

成组的名称与取值

Heading标题

标题,语义与字号分开

Kbd键盘键

键盘按键,用于说明快捷键

Link链接

文字链接,可渲染为路由组件

List列表

有序列表与无序列表

Mark标记

标出搜索命中的文字

NumberFormat数字格式

按当前语言格式化数字

Prose富文本

富文本容器,接管原生标签

Spoiler剧透遮罩

遮住剧透内容,点击后揭示

Text文字

正文文字

Time时间

按当前语言显示时间

布局

排布子元素的容器,控制方向、间距和对齐。

Affix吸附

滚动吸附

AspectRatio宽高比

把内容固定在给定的宽高比内

Center居中

把内容在两个方向上居中

Container内容容器

把页面内容限制在可读宽度内并居中

Divider分隔线

分隔两段内容的细线

Flex弹性布局

完整控制方向、对齐与分布的 flex 容器

Grid栅格

按固定列数排布子元素的栅格容器

Inline行内排列

把子元素横向排成一行,放不下时换行

ScrollArea滚动区域

使用浮层滚动条的滚动区域

SimpleGrid等宽栅格

按最小列宽自动决定列数的等宽栅格

Space空白占位

在 flex 容器中占位的空白元素

Splitter分栏

可以拖动分隔线调整比例的分栏容器

Stack纵向排列

把子元素纵向排成一列

原子

界面中最小的可复用单元,按钮、标签与徽标。

Avatar头像

代表一个用户或实体的圆形头像

Badge徽标

把未读数钉在宿主元素的角上

Button按钮

触发一次操作的按钮

ButtonGroup按钮组

把一组按钮拼接为一个整体

Chip可选标签

可选中或者可移除的条目

CloseButton关闭按钮

关闭对话框、抽屉与提示

CopyButton复制按钮

把一段文本写入剪贴板

FloatButton浮动按钮

固定于页面或容器边角的常用操作

IconButton图标按钮

只包含图标的按钮,必须提供名称

Indicator状态点

表示状态的小圆点

Skeleton骨架屏

内容加载期间保持其形状的占位块

Spinner加载指示

表示正在进行中的旋转指示

SplitButton分裂按钮

常用操作与附加菜单组成的按钮

Tag标签

标注状态、分类与属性的短标签

表单

输入、选择与提交数据的控件。

Autocomplete自动补全

保留自由文本,支持光标处片段补全

Checkbox复选框

勾选一项,或者从多项中勾选若干

CheckboxGroup复选框组

一组复选框,共用一个数组值

Combobox组合框

边输入边筛选的选择框

DateField日期输入框

分段输入日期与时间

DatePicker日期选择器

输入或者从日历中选择日期

DateRangeField日期范围输入框

分段输入开始与结束日期

DateRangePicker日期范围选择器

输入或者从日历中选择日期区间

DateTimePicker日期时间选择器

输入或者从日历与时间段中选择日期时间

Editable原地编辑

在原位置编辑文本,确认或取消修改

FileUpload文件上传

点击或者拖放选择文件

Form表单

汇集字段的值、按规则校验并提交

FormField表单字段

为控件配上标签、说明与错误信息

FormLayout表单布局

把字段分组排成栅格,带有标题与说明

Input输入框

单行文本输入框

InputGroup输入框组

把前后缀、按钮与输入框合为一个输入面

Listbox列表框

常驻的可选列表

MultiCombobox多选组合框

输入搜索并选择多项

MultiSelect多选选择器

从列表中选择多项

PasswordInput密码输入框

输入密码,可以切换明文显示

PinInput验证码输入框

逐格输入验证码或者 PIN 码

RadioGroup单选框组

从多项中选择一项的单选框组

RangeSlider范围滑块

在数值范围内拖出一段区间

Rating评分

以星级打分或者展示评分

SearchInput搜索框

输入关键词进行搜索

SegmentedControl分段控制器

在几个并列的选项中切换其一

Select选择器

从列表中选择一项

Slider滑块

在数值范围内拖动取值

Switch开关

在开与关之间切换

TagsInput标签输入框

输入并以标签形式保存多个值

Textarea多行输入框

多行文本输入框

TimeField时间输入框

分段输入时间

Toggle切换按钮

可按下与松开的双态按钮

Tree树形列表

支持父子联动勾选与半选状态的树形列表

TreeSelect树形选择器

从树形层级中选择一项

浮层

悬浮在页面之上的面板与提示。

AlertDialog确认对话框

需要用户明确回答的确认对话框

CommandPalette命令面板

以快捷键唤起的搜索面板,输入后从命令与页面中选择

ContextMenu右键菜单

右键或者长按某个区域时在指针处展开的菜单

Dialog对话框

打断当前任务的模态对话框

Drawer抽屉

从屏幕边缘滑入的模态面板

DropdownMenu下拉菜单

点击展开的一组操作

HoverCard悬停卡片

悬停在链接上时浮出的预览卡片

Lightbox图片预览

独立控制打开状态和图片序列的全屏预览

LoadingOverlay加载遮罩

盖在一块区域上的加载指示,稍作等待再显示

Menubar菜单栏

横向排列的一组菜单,像桌面应用的菜单栏

Popconfirm气泡确认框

贴着触发器浮出的确认气泡

Popover气泡卡片

点击触发器后浮出的面板

Sheet底部面板

从屏幕底部升起、可以拖动关闭的面板

Toast轻提示

操作完成后浮出的一条简短反馈

Tooltip文字提示

悬停或聚焦时显示的简短说明

展示

承载与呈现内容的面板、容器和状态。

Accordion折叠列表

多段内容依次展开与收起的折叠列表

Alert消息条

操作之后出现在页面内的消息条

Banner公告条

横贯页面顶部的一条公告

Calendar日历

按月展示与选择日期

Callout标注

写入内容之中的一段标注

Card卡片

承载一组内容的容器,比页面底色高出一层

Carousel轮播

支持拖拽、分组与按需自动播放的内容轮播

Collapsible折叠区域

由一个触发器控制展开与收起的区域

Empty空状态

一块区域没有内容时的占位,说明原因与下一步

Image图片

懒加载、撑住位置并在失败时回退的图片

MeterGroup占比条

以一条分段的横条表示各部分占总量的比例

MonthGrid月份日历

月份内容日历

Panel面板

带有标准标题栏的卡片,标题、计数与操作各有固定位置

Progress进度条

以横条的填充长度表示任务完成的比例

QRCode二维码

可扫描、可导出的 SVG 二维码

RangeCalendar范围日历

按月展示与选择日期区间

Result结果

一次操作完成后的结果页,成功、失败、警告或提示

RingProgress环形进度

以圆环的弧长表示任务完成的比例

Statistic统计数值

突出显示一个关键数字,附带标签与变化

Tabs标签页

在同一位置切换显示的几组内容

Timeline时间线

以相连的节点按顺序呈现事件

数据

按行列组织并呈现成组数据的组件。

DataList数据列表

支持列表、网格、分页与自定义条目的数据视图

DataTable数据表格

支持排序、筛选、分页与行选择的数据表格

Pagination分页

在页码范围内切换当前页

Table表格

按行列组织的静态数据表

VirtualList虚拟列表

只渲染可见范围附近条目的虚拟列表

壳层

承载整个界面的外层框架与区域划分。

AppShell应用框架

应用的外层框架,安置侧栏、页眉与主区域

Page页面骨架

页面内容的骨架,含标题区、正文与侧栏

Section分节

带标题的内容分节

Sidebar侧边栏

应用左侧的导航栏,可收起为图标条