组件

按层次组织的全部组件。

基础设施

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

DisclosureIcon 展开指示

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

Highlight 高亮块

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

Ripple 涟漪

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

VisuallyHidden 视觉隐藏

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

排版

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

Blockquote 引用

引用他处的整段文字

Code 行内代码

正文中的行内代码

CodeBlock 代码块

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

DescriptionList 描述列表

成组的名称与取值

Heading 标题

标题,语义与字号分开

Kbd 键盘键

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

LineClamp 按行折叠

把长内容折叠到指定行数,超出时可以展开

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 菜单栏

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

OverlayBranch 外部图层

与模态浮层共存的外部图层

Popconfirm 气泡确认框

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

Popover 气泡卡片

点击触发器后浮出的面板

Sheet 底部面板

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

Toast 轻提示

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

Tooltip 文字提示

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

Tour 漫游式引导

逐步高亮页面元素的新手引导

展示

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

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 侧边栏

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