跳转到内容

组件总览

全部组件入口按 sidebar 自动编排,卡片说明优先复用各组件文档 frontmatter 中的 description,避免总览页重复维护同一份信息。

通用

按钮 Button

按钮是一种命令组件,可发起一个即时操作。

查看文档

全局配置 ConfigProvider

在应用的最外层进行配置,一次设置,全局生效。一般用于设置国际化语言等功能。

查看文档

复制 Copy

通过链接或按钮触发复制操作。

查看文档

敏感信息 Secret

对敏感文本提供显示、隐藏和复制操作。

查看文档

主题容器 ThemeProvider

独立的局部主题容器组件,在子树内注入主题模式与运行时 theme 变量。

查看文档

文本省略 Ellipsis

在有限空间内展示较长文本,并在内容被截断时提供提示或展开能力。

查看文档

排版 Typography

用于展示标题、段落、文本内容。

查看文档

布局

分割线 Divider

划分内容区域,对模块做分隔。

查看文档

栅格 Grid

栅格可以有效的保证页面的一致性、逻辑性、加强团队协作和统一。

查看文档

布局 Layout

页面的基础布局框架,常与组件嵌套使用,构建页面整体布局。

查看文档

导航

面包屑 Breadcrumb

面包屑是辅助导航模式,用于识别页面在层次结构内的位置,并根据需要向上返回。

查看文档

下拉菜单 Dropdown

页面上的命令过多时,可将备选命令收纳到向下展开的浮层容器中。

查看文档

菜单 Menu

收纳、排列并展示一系列选项的列表。

查看文档

页头 PageHeader

页头位于页容器顶部,起到了内容概览和引导页级操作的作用。包括面包屑、标题等内容。

查看文档

分页 Pagination

采用分页控制单页内的信息数量,也可进行页面跳转。

查看文档

步骤条 Steps

明示任务流程和当前完成程度,引导用户按照步骤完成任务。

查看文档

数据展示

头像 Avatar

用作头像显示,可以为图片、图标或字符形式展示。

查看文档

徽标数 Badge

一般出现在图标或文字的右上角。提供及时、重要的信息提示。

查看文档

卡片 Card

将信息分类后分标题、详情等区域聚合展现,一般作为简洁介绍或者信息的大盘和入口。

查看文档

图片轮播 Carousel

用于展示多张图片、视频或内嵌框架等内容的循环播放,支持系统自动播放或用户手动切换。

查看文档

折叠面板 Collapse

可以折叠 / 展开的内容区域。

查看文档

描述列表 Descriptions

一般用于详情页的信息展示。

查看文档

空状态 Empty

指当前场景没有对应的数据内容,呈现出的一种状态。

查看文档

图片裁剪 Cropper

基于 cropperjs 的图片裁剪封装,提供选区联动、实例方法和底层元素配置透传。

查看文档

列表 List

最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。

查看文档

气泡卡片 Popover

鼠标悬停、聚焦或点击在某个组件时,弹出的气泡式的卡片浮层。可以对卡片上的元素进行操作。

查看文档

二维码 QrCode

将文本快速转换为二维码,支持状态覆盖、中心图标和 SVG 或 Canvas 两种渲染方式。

查看文档

数值显示 Statistic

突出展示某个或某组数字、带描述的统计类数据。

查看文档

表格 Table

用于数据收集展示、分析整理、操作处理。

查看文档

标签页 Tabs

将内容组织同一视图中,一次可查看一个视图内容,查看其他内容可切换选项卡查看。

查看文档

标签 Tag

用于信息的选择、筛选、分类。用户通过标签进行信息反馈和交互操作。

查看文档

标签组 TagGroup

用于展示一组标签项,并在数量过多时自动折叠为计数入口。

查看文档

时间轴 Timeline

按照时间顺序或倒序规则的展示信息内容。

查看文档

文字气泡 Tooltip

鼠标悬停、聚焦或点击在某个组件时,弹出的文字提示。

查看文档

树 Tree

对于文件夹、分类目录、组织架构等层级较多的内容,树可以清楚显示他们的层级关系,并具有展开、收起、选择等交互功能。

查看文档

反馈

警告提示 Alert

向用户显示警告的信息时,通过警告提示,展现需要关注的信息。

查看文档

抽屉 Drawer

触发命令后,从屏幕一侧滑出的抽屉式的面板。

查看文档

全局提示 Message

由用户的操作触发的轻量级全局反馈。

查看文档

Modal 对话框

在当前页面打开一个浮层,承载相关操作。

查看文档

通知提醒框 Notification

全局展示通知提醒,将信息及时有效的传达给用户。

查看文档

气泡确认框 Popconfirm

点击元素,弹出气泡式的确认框。

查看文档

进度条 Progress

给予用户当前系统执行中任务运行状态的反馈,多用于运行一段时间的场景,有效减轻用户在等待中产生的焦虑感。

查看文档

结果页 Result

用于反馈一系列操作任务的处理结果,当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用。

查看文档

骨架屏 Skeleton

将加载中的数据用灰色占位。

查看文档

加载中 Spin

用于页面和区块的加载中状态 - 页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

查看文档

其他

固钉 Affix

将页面元素钉在可视范围。当内容区域比较长,需要滚动页面时,固钉可以将内容固定在屏幕上。常用于侧边菜单和按钮组合。

查看文档

锚点 Anchor

通过锚点可快速找到信息内容在当前页面的位置。

查看文档

自动补全 AutoComplete

输入框的自动补全功能。

查看文档

返回顶部 BackTop

可一键返回顶部的按钮。

查看文档

级联选择 Cascader

使用多级路径组织选项,适合层级化数据的单选、多选与搜索场景。

查看文档

复选框 Checkbox

在一组数据中,用户可通过复选框选择一个或多个数据。

查看文档

颜色选择器 ColorPicker

以 TDesign API 为主的颜色选择器,用于输入、预览和调整颜色。

查看文档

日期选择器 DatePicker

选择日期。支持年、月、周、日类型,支持范围选择等。

查看文档

表单 Form

具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。

查看文档

JSON 表单 JsonForm

用声明式 schema 快速生成表单,同时支持 A2UI 配置翻译和通过 ConfigProvider 注入业务自定义字段组件。

查看文档

输入框 Input

基本表单组件,并在原生控件基础上进行了功能扩展,可以组合使用。

查看文档

数字输入框 InputNumber

仅允许输入数字格式的输入框。

查看文档

标签输入框 InputTag

用来输入标签。

查看文档

提及 Mention

用于在输入中提及某人或某事,常用于发布、聊天或评论功能。

查看文档

折叠列表 OverflowList

其他分类组件文档。

查看文档

单选框 Radio

在一组相关且互斥数据中,用户仅能选择一个选项。

查看文档

滚动条 Scrollbar

用于替换浏览器默认滚动条样式。

查看文档

选择器 Select

当用户需要从一组同类数据中选择一个或多个时,可以使用下拉选择器,点击后选择对应项。

查看文档

滑动输入条 Slider

滑动型输入器,展示当前值和可选范围。

查看文档

面板分割 Split

将面板分割成两部分。

查看文档

开关 Switch

互斥性的操作控件,用户可打开或关闭某个功能。

查看文档

文本域 Textarea

多行纯文本编辑控件,适用于评论或反馈表单中的一段意见。

查看文档

时间选择器 TimePicker

在弹出面板上选择时间,以便捷完成时间输入的控件。

查看文档

数据穿梭框 Transfer

两栏布局的多选组件,将元素从一栏即时移到另一栏。

查看文档

树选择 TreeSelect

可以对树形结构数据进行选择。

查看文档

触发器 Trigger

用于对元素添加 hover, click, focus 等事件,并且弹出下拉框。

查看文档

上传 Upload

用户可传输文件或提交相应的内容。

查看文档

验证码输入 VerificationCode

验证码输入组件

查看文档

水印 Watermark

用于给页面的指定区域加上水印。

查看文档