Nuxt UI 组件库测试

v4.7.1

使用说明

本页面展示 Nuxt UI 4.x 组件的使用示例。所有组件均在客户端渲染以避免 hydration 问题。

基础组件

按钮 Button
图标 Icon
徽章 Badge
primarysecondarysuccesswarningerrorinfoSubtleOutline
头像 Avatar
ABCDE
用户1用户2用户3
角标 Chip
5
99+
A
快捷键 Kbd
+K
Ctrl+S
EscEnter
折叠 Collapsible

表单组件

输入框 Input
文本域 Textarea
选择器 Select
单选框 Radio
复选框 Checkbox
开关 Switch
滑块 Slider
数字输入 InputNumber
标签输入 InputTags
表单 Form

反馈组件

提示 Alert
成功提示
操作已成功完成
警告提示
请注意检查输入内容
错误提示
发生错误,请重试
信息提示
这是一条信息
Toast 通知
进度条 Progress
骨架屏 Skeleton

导航组件

标签页 Tabs
内容一
步骤条 Stepper
步骤一
描述一
步骤二
描述二
步骤三
描述三
Step 0 of 0

数据展示

表格 Table
ID姓名年龄状态
No data
时间线 Timeline
 
2024-01-01
项目启动
 
2024-02-01
需求分析
 
2024-03-01
开发阶段
 
2024-04-01
测试上线
树形 Tree

抽屉组件

抽屉 Drawer
滑出面板 Slideover

布局组件

手风琴 Accordion
分隔线 Divider

上方内容

下方内容