Accordion

x-accordion
默认（单展开）
多展开 + separated

Alert

x-alert

Avatar

x-avatar

AvatarGroup

x-avatar-group

Badge

x-badge
红 橙 黄 绿 主 灰
紧急 高 中 低
异常 告警 待处理 成功 提示 未开始
张三 李四 王五
{{ c }} 已全部移除

Button

x-button
variant
Default Secondary Destructive Outline Ghost
size
Small Medium Large
icon / loading / disabled
新建 下一步 提交中 已禁用

Calendar

x-calendar
已选日期： {{ calendarDate || '未选择' }}
点击日期切换选中状态，左右箭头切换月份。

Card

x-card

卡片正文内容。这里可以放任意内容，如表单、列表、图表等。
本月收入¥ 128,420
同比增长+ 12.5%
订单数1,284
悬停卡片

无标题区，整卡可点击，悬停加深阴影。

Checkbox

x-checkbox

CheckboxGroup

x-checkbox-group
hobbies: {{ form.hobbies.join(',') || '-' }}

ColorPicker

x-color-picker
{{ form.color }}

CommandPalette

x-command-palette
打开命令面板 ⌘K
上次选择：{{ cmd.last }}

ContextMenu

x-context-menu
在此区域右键打开菜单
最近：{{ ctx.last }}
提示：每个文件可以独立挂载 ContextMenu。
{{ f.name }}
{{ f.size }}

Empty

x-empty

FileUpload

x-file-upload

Form

x-form
取消 提交

FormField

x-form-field

Icon

x-icon 基于 Lucide
{{ n }}

完整图标库参见 lucide.dev/icons，用 name="kebab-case-name" 引用。

Input

x-input
account: {{ form.account || '-' }}

InputDate

x-input-date
date: {{ form.date || '-' }}

InputMenu

x-input-menu
framework: {{ form.framework || '-' }}

InputNumber

x-input-number
qty: {{ form.qty }} · price: {{ form.price }}

InputTags

x-input-tags
skills: {{ form.skills.join(', ') || '-' }}

InputTime

x-input-time
time: {{ form.time || '-' }}

Kbd

x-kbd
打开命令面板 ⌘K
保存 Ctrl+S
暗色样式 Esc

Listbox

x-listbox

Pagination

x-pagination
当前 {{ pg.cur }} / 每页 {{ pg.size }} · 总数 {{ pg.total }}
minimal
simple

PinInput

x-pin-input
pin: {{ form.pin || '-' }}

Popover

x-popover
trigger
提示信息
这是一个点击触发的 Popover，可以放入任意 Vue 模板内容。
什么是高保真原型？
接近真实产品视觉与交互的可点击原型。
placement
placement = {{ p }}
表单 Popover
取消 应用

Progress

x-progress
上传进度
- 10 + 10

RadioGroup

x-radio-group

ScrollArea

x-scroll-area
竖向（thin）
第 {{ i }} 条记录
横向
卡片 {{ i }}
hover 显示
{{ ['北京','上海','广州','深圳','杭州'][i % 5] }} · 任务 {{ i }}

Select

x-select
city: {{ form.city || '-' }}

SelectMenu

x-select-menu
tags: {{ (form.tags||[]).join(', ') || '-' }}

Separator

x-separator
段落 A
段落 B
左 中 右
2026 年 5 月

Skeleton

x-skeleton

Slider

x-slider

Stepper

x-stepper
上一步 下一步 current: {{ stepperCurrent }}

Switch

x-switch

Table

x-table
基础 · 可选择 · 可排序
已选 {{ selectedRows.length }} 项

Tabs

x-tabs
line（底部条）
pill
default（block 撑满）

Textarea

x-textarea

Timeline

x-timeline
基础（带状态）
带图标

Toast

x-toast
位置
语义（靠图标区分，颜色中性）
默认 成功 信息 警告 危险 加载中
带 action / 标题描述
附带操作按钮 标题 + 描述 清空全部

Tooltip

x-tooltip
placement
Top Right Bottom Left
图标按钮 + Tooltip
行内文本

鼠标悬停查看 技术栈细节 ，或者了解 快捷键提示 。

Tree

x-tree
基础（默认展开全部）
选中：{{ treeSelected || '—' }}
可勾选
已勾选：{{ treeChecked.join(', ') || '—' }}

TreeSelect

x-tree-select
基础（默认展开全部 · 可清除）
选中：{{ treeSelectVal || '—' }}
可搜索（按需展开匹配项）
选中：{{ treeSelectVal2 || '—' }}

User

x-user
size
带 actions / badge
vertical · 卡片