COMPONENTS

组件总览

以下是 StoneUI 当前提供的全部组件模块。React 与 Vue 保持相同的接口、交互与视觉表现。

56 个组件模块ReactVue 3

56 / 56

Basic 基础组件

5

Button 按钮

触发操作与提交任务的基础控件。

Container 布局容器

快速组织页面区域与内容边界。

Layout 栅格布局

构建响应式行列和业务页面结构。

Space 间距

统一控制一组元素之间的间隔。

Divider 分割线

分隔内容区块并建立视觉层级。

Configuration 全局配置

1

ConfigProvider 全局配置

集中设置主题、尺寸与本地化能力。

Form 表单组件

21

Cascader 级联选择器

从多级关联数据中逐层选择。

Checkbox 多选框

在多个选项中选择一项或多项。

ColorPicker 颜色选择器

选择并输入业务所需的颜色值。

ColorPickerPanel 颜色面板

独立展示可组合的颜色选择面板。

DatePicker 日期选择器

选择日期、日期范围和快捷时间。

DatePickerPanel 日期面板

独立展示可组合的日期选择面板。

Form 表单

管理字段布局、校验与提交状态。

Input 输入框

输入文本、密码及多行内容。

InputNumber 数字输入框

输入带范围和步长约束的数值。

InputOtp 验证码输入

输入定长的一次性验证码。

InputTag 标签输入框

连续录入并管理多个标签值。

Radio 单选框

从互斥选项中选择唯一结果。

Rate 评分

通过星级快速录入评分结果。

Select 选择器

从候选选项中搜索并选择内容。

Slider 滑块

在连续或离散区间内选择数值。

Switch 开关

切换两个互斥的即时状态。

TimePicker 时间选择器

选择时间点或时间范围。

Transfer 穿梭框

在两个列表之间批量移动选项。

TreeSelect 树形选择

在层级结构中检索并选择节点。

Upload 上传

上传文件并管理队列与进度。

VirtualSelect 虚拟选择器

流畅处理大规模候选数据。

Data 数据展示

14

Avatar 头像

展示用户、团队或对象的图像标识。

Badge 徽章

在元素旁展示数量或状态提示。

Card 卡片

承载一组相关信息与操作。

Carousel 走马灯

循环展示图片或内容片段。

Collapse 折叠面板

按需展开和收起成组内容。

Descriptions 描述列表

有序展示对象的字段和值。

InfiniteScroll 无限滚动

滚动至边界时持续加载内容。

Pagination 分页

在多页数据之间定位和切换。

Progress 进度条

清晰表达任务的当前完成程度。

Statistic 统计数值

突出展示关键业务指标。

Tag 标签

标记属性、分类或处理状态。

Timeline 时间线

按时间顺序呈现连续事件。

Tree 树形控件

展示和操作层级化的数据集合。

Watermark 水印

为内容区域添加安全标识。

Navigation 导航组件

5

Backtop 回到顶部

快速返回长页面的顶部位置。

Breadcrumb 面包屑

显示当前页面所在的层级路径。

Dropdown 下拉菜单

收纳并触发一组操作命令。

Steps 步骤条

展示流程进度和当前步骤。

Tabs 标签页

在同层级内容视图之间切换。

Feedback 反馈组件

8

Dialog 对话框

在当前任务上层承载关键交互。

Drawer 抽屉

从页面边缘展开补充内容。

Loading 加载

反馈内容或操作的等待状态。

Message 消息提示

轻量反馈操作结果和系统状态。

Notification 通知

展示需要持续关注的全局消息。

Popover 弹出框

在触发元素附近展示丰富内容。

Tooltip 文字提示

补充解释控件或内容的含义。

Tour 漫游式引导

分步骤引导用户了解关键功能。

Table & Report 表格与报表

2

TableGrid 数据网格

面向百万级行列数据的高性能网格。

TableSheet 工作表

支持编辑、公式、报表与打印的工作簿。