组件总览

X-Next 当前公开组件按业务用途分为通用、布局、表单、反馈、导航、数据展示和其他能力。每个组件页先提供用途、基础用法、按需导入和导出项，后续将参考 Ant Design Vue 与 Arco Design Vue 补齐更完整的 API、事件、插槽和复杂场景。

通用

组件	说明
Button 按钮	触发即时操作，是表单提交、弹层确认、工具栏命令等场景里的主要动作入口。
Link 链接	用于页面跳转或轻量动作，适合在正文、列表和操作区中承载低重量入口。
Tag 标签	用于标记状态、属性、分类或筛选条件，常见于列表、表格和详情页。

布局

组件	说明
Grid 栅格	通过行列结构组织页面内容，适合构建响应式表单、卡片和信息区块。
Layout 布局	提供页头、侧边栏、内容区和页脚组合，适合搭建后台系统页面框架。
Space 间距	为相邻元素提供一致间距，减少业务页面中的重复 margin 样式。
ResizeBox 可调整区域	用于需要拖拽改变尺寸的面板、侧栏或编辑器区域。
Scrollbar 滚动条	为固定高度内容区提供统一滚动体验。

表单

组件	说明
Form 表单	承载数据录入、校验和提交，是业务系统里最核心的交互容器。
Input 输入框	用于单行文本输入，并提供搜索、密码和组合输入等扩展形态。
Textarea 文本域	用于多行文本输入，适合备注、描述、评论等较长内容。
InputNumber 数字输入	用于金额、数量、比例等需要数值约束的输入场景。
InputTag 标签输入	用于录入多个短文本项，如标签、关键词、邮箱列表。
Checkbox 复选框	用于多选或开关式勾选，适合配置项和批量选择。
Radio 单选框	用于在少量互斥选项中选择一个结果。
Select 选择器	用于从选项集合中选择单个或多个值，适合枚举、状态、人员等字段。
Slider 滑块	用于在连续区间内选择数值，适合音量、比例、进度等场景。
Rate 评分	用于评分、打星或展示满意度等级，适合评价表单和评分结果展示。
ColorPicker 颜色选择器	用于选择颜色值，支持 hex / rgb / hsl 与透明度。
Switch 开关	用于表达启用/停用、打开/关闭这类二元状态。
DatePicker 日期选择器	用于输入或选择日期、月份、年份、季度、周或日期范围。
TimePicker 时间选择器	用于输入或选择具体时间点，也可选择开始和结束时间。
TimeRangeSelector 时间范围选择	用于选择或快捷切换时间范围，适合报表、筛选和监控页面。

反馈

组件	说明
Alert 警告提示	用于展示页面内的重要提示、状态说明或操作反馈。
Dialog 对话框	用于承载需要用户聚焦处理的确认、编辑或详情内容。
Drawer 抽屉	从屏幕边缘展开内容，适合详情、编辑和辅助配置。
Message 全局提示	用于轻量级即时反馈，通常由方法调用触发。
MessageBox 消息框	用于确认、警告等阻塞式反馈。
Notification 通知提醒	用于右上角等位置展示较完整的通知内容。
Popconfirm 气泡确认	用于在按钮或链接旁边完成低成本二次确认。
Popover 气泡卡片	用于围绕触发元素展示富内容浮层、简短详情或轻量操作。
Progress 进度条	用于表达任务进度、上传状态或流程完成度。
Spin 加载中	用于局部区域或页面等待状态。
Skeleton 骨架屏	用于数据加载前占位，降低页面空白感。

导航

组件	说明
Dropdown 下拉菜单	用于承载一组收起的操作项或选择项。
Menu 菜单	用于侧边栏、顶部导航和多级菜单结构。
Pagination 分页	用于长列表和表格的数据分页浏览。
Steps 步骤条	用于展示流程阶段和当前进度。
Tabs 标签页	用于同层级内容分组切换。

数据展示

组件	说明
Empty 空状态	用于列表、表格或模块无数据时的占位表达。
Image 图片	用于图片展示、预览和预览组能力。
Table 表格	用于结构化数据展示、排序、筛选、分页和行操作。
Timeline 时间线	用于按时间或顺序展示事件流。
Upload 上传	用于文件选择、拖拽、粘贴上传与列表管理。

图表

x-next 内置手写 SVG 图表，无外部图表库依赖。先看图表总览与选择确定用哪个，再进入各组件页。

组件	说明
LineChart 折线图	用于展示随时间的变化趋势，支持多系列、面积与堆叠面积。
BarChart 柱状趋势图	用于按类目比较大小，支持多系列并排与堆叠。
PieChart 饼图	用于展示占比构成，支持饼图与环形图。
TrendChart 迷你趋势图	用于卡片角落的小型趋势与指标变化提示。
Heatmap 热力图	用于按天展示一年或任意区间的活跃度分布。

其他能力

组件	说明
Draggable 拖拽	用于列表排序和拖拽交互，底层依赖 SortableJS。
Network 网络状态	用于感知网络连接状态并向用户展示连接质量或离线提示。
Tooltip 文字提示	用于解释图标、按钮或截断文本。
Watermark 水印	用于给页面或局部内容区域添加文字、图片或多行水印。

底层能力

内部底层能力

以下能力主要给组件库内部和高级封装使用，普通业务优先选择上方语义组件。

能力	说明
Trigger 触发器	底层浮层触发与定位 primitive，业务浮动卡片请优先使用 Popover。

即将废弃

即将废弃

以下组件仅作为迁移期兼容入口保留，新项目不建议使用。

组件	替代方案
Popup 弹出层	使用 Popover 气泡卡片。