1
按钮 Button
类型
尺寸
图标
加载
按钮组
2
输入框 Input
基础
尺寸
前后缀
¥
.00
🔍
清除/密码
字数
状态
自适应文本域
3
复选框 / 单选框
复选框
全选/半选
按钮式
单选框
按钮式
4
开关 Switch
基础
尺寸
带文字
加载中
5
下拉选择 Select
原生
自定义
✓
可搜索
无匹配
多选
分组
6
滑块 Slider
基础
带输入框
双滑块
带刻度
0°C25°C50°C75°C100°C
禁用
7
步进器 / 评分
步进器
尺寸
评分
★★★☆☆
只读
8
日期时间
日期
日期时间
区间
时间
月份
快捷区间
9
标签页 Tabs
10
面包屑 / 分页
面包屑
带图标
分页
简洁
/
11
表格 Table
| 姓名 ▲ | 年龄 ▲ | 部门 | 薪资 ▲ | 状态 | 操作 | |
|---|---|---|---|---|---|---|
| 暂无数据 | ||||||
12
树 Tree
基础树
📄
可勾选
13
穿梭框 Transfer
无数据
无数据
14
级联选择 Cascader
省市区
›
›
15
自动补全 Autocomplete
基础
0"
@input="open = true; acIndex = -1"
@keydown.down.prevent="acIndex = Math.min(acIndex+1, acResults.length-1); open=true"
@keydown.up.prevent="acIndex = Math.max(acIndex-1, -1)"
@keydown.enter.prevent="pickAc()" @keydown.esc="open=false">
带图标
🔍
0" @input="open = true">
16
标签输入 TagInput
基础
✕
带颜色
✕
17
折叠面板 Collapse
手风琴模式(同时只展开一个)
18
时间轴 Timeline
左右交替
19
步骤条 Steps
✓
点状步骤条
20
轮播 Carousel
21
弹窗 Modal
基础弹窗
这是一个基础弹窗。点击遮罩、右上角关闭按钮,或按 Esc 都可以关闭。
⚠️
确认删除?
删除后无法恢复,确定要继续吗?
ℹ️
提示信息
这是一条信息提示,只有一个确定按钮。
全屏弹窗
全屏内容区域,可以放很长的内容。
内容块
外层弹窗
点击下面的按钮可以打开内层弹窗。
内层弹窗
这是嵌套在里面的弹窗。
22
抽屉 Drawer
抽屉内容区域,可以放表单、详情等。
23
提示与气泡
这是一段提示文字
上方提示
下方提示
标题
这是一段更详细的说明文字,可以放多行内容。
⚠️
确定要删除这条记录吗?
24
全局提示 Message / Notification
Message
Notification
25
进度条 / 加载
线形
带文字
环形
分段
加载
加载中…
骨架屏
26
空状态 / 结果页 / 水印
空状态
📭
暂无数据
这里还没有任何内容
结果页
✓
操作成功
订单已提交,我们会尽快处理
!
操作警告
部分信息未填写完整
✕
操作失败
网络异常,请稍后重试
水印
内部资料
这里是受水印保护的内容区域。
27
拖拽排序 Sortable
列表拖拽
⠿
列表项
卡片拖拽
28
图表 Chart
折线图
柱状图
饼图
环形图
29
命令面板 Command Palette
或按 Ctrl + K
🔍
ESC
没有匹配的命令
30
上传 Upload
点击上传
拖拽上传
☁️
点击或拖拽文件到此处上传
支持多选
文件列表
还没有文件
图片墙
31
描述列表 / 统计数值
描述列表
统计数值
较上周
32
分割面板 / 可调整
左右分割(拖动中间条)
左侧
右侧
上下分割
上方
下方
33
回到顶部 / 固钉
回到顶部
页面右下角还有一个浮动按钮
固钉
固钉头部(滚动时固定在顶部)
滚动内容
34
虚拟滚动 Virtual List
10000 条数据,只渲染可视区域
35
富文本编辑器(简版)
在这里输入内容,可以加粗、斜体、列表等。
下面的 HTML 会实时同步:
36
Markdown 编辑器(简版)
37