按钮 Buttons

各种按钮样式

Primary
主色实心按钮
Outline
边框按钮
Soft
浅色背景
Ghost
无边框纯文字
Shadow
悬浮阴影效果
Pill
圆角常规
Orange
强调色按钮

输入框 Inputs

文本输入控件

Basic
基础输入框
Underline
仅底部边框
🔍
Search
带搜索图标

文本域 Textareas

多行文本输入

Basic
基础文本域
input.json
Code Editor
代码编辑器风格

卡片 Cards

内容容器

基础卡片
这是卡片的描述文本
Basic
基础卡片
悬浮卡片
鼠标悬浮时上
Hover
悬浮效果
左边框卡片
左侧强调边框
Left Border
左边框强调

标签 Tags

分类标签

实心标签
Solid
实心填充
默认 橙色 蓝色
Soft
柔和多色
JSON Base64 MD5
Pill
药丸形状

工具栏 Toolbars

操作按钮组

Basic Toolbar
基础工具栏
Segment
分段控制器
Tabs
标签

状态指示 Status

状态徽章和进度

成功 警告 错误
Badge
状态徽标
进度 65%
Progress
进度条

复选框 Checkboxes

复选框和开关

Checkbox
复选框
开启功能
关闭功能
Switch
开关控件

提示信息 Alerts

通知和警告

💡
提示
按 Ctrl+V 可快速粘贴内容
Info
信息提示
JSON 格式错误:第 5 行缺少逗号
Error
错误提示

数字显示 Numbers

统计数字

1,234
字符数
Large
大数字显示
42
匹配数
Card
统计卡片

代码展示 Code

代码片段

使用 JSON.parse() 解析字符数

Inline
代码块
const data = JSON.parse('{"name": "test"}');
// 输出结果
console.log(data);
Block
代码块

其他组件 Misc

键盘、空状态、列表、加载

复制
Keyboard
键盘快捷键
📭
暂无数据
请输入内容后再试
Empty
空状态
🔧
JSON 格式化
格式化、压缩、校验
List Item
列表项
处理中...
Loading
加载状态