外观
共 26 个组件与 v-ripple 指令，覆盖从按钮、表单控件到弹层与反馈的常见场景。
v-ripple
下面每张卡片里的预览都由真实组件实时渲染，可以直接点击体验；点进卡片即可看到完整用法、API 表格与可一键复制的源码。
还没安装？
一条命令即可接入，详见快速开始。
npm i miao-design
Button 按钮
六种语义色 × 五种变体 × 四种尺寸，内置涟漪反馈与点击节流。
ButtonGroup 按钮组
把一组按钮拼成整体，统一接管变体、尺寸、颜色与禁用状态。
Icon 图标
基于 @mdi/js 的 7000+ 图标，支持尺寸、颜色、旋转与自旋。
Divider 分割线
水平 / 垂直分割线，颜色、粗细与间距可通过 CSS 变量定制。
Fab 悬浮按钮
固定在视口角落的操作入口，支持位置、尺寸与扩展文本。
Input 输入框
带前后缀插槽、清除、字数限制与圆角控制的文本输入。
InputNumber 数字输入框
受控数字输入，支持步长、上下限、精度与自定义控制器。
Select 选择器
下拉选择，由 options 数据驱动，支持单选 / 多选、清空、禁用项与面板尺寸控制。
Checkbox 复选框
单个复选框与复选框组，支持半选、禁用与 v-model 数组。
Radio 单选框
单选框与单选框组，组内自动互斥并统一管理选中值。
RadioButtonGroup 按钮单选
由 options 驱动的分段式单选，适合视图切换等场景。
Switch 开关
开关状态切换，支持加载态、禁用与自定义标签插槽。
Slider 滑块
横向 / 纵向拖动取值，支持步进、数值气泡与尺寸覆盖。
DatePicker 日期选择
日期 / 日期时间选择，format 决定是否启用时间面板。
DateRangePicker 日期范围
区间选择，支持双月视图、时间联动与两端占位符定制。
ColorPicker 颜色选择
取色面板 + 色相条 + 透明度，支持 HEX / RGB 输入。
Avatar 头像
图片 / 文字 / 图标头像，提供多种尺寸、形状与语义色。
Progress 进度条
线形与环形进度，支持不确定态、缓冲态与六种语义色。
Tooltip 文字提示
悬停 / 聚焦 / 点击触发的浮层提示，支持十余种放置方位。
Alert 警告提示
四种语义 × 三种变体的提示条，支持标题、图标与关闭。
Tabs 标签页
标签栏（MTabs / MVTabs）与内容区（MTabPanes / MTabPane）分离，靠共享 v-model 联动。
Nav 导航
由 items 驱动的导航，支持横向 / 纵向、图标与数字徽标。
Dialog 对话框
模态对话框，自带 Morph 动效、#trigger 触发与多档尺寸。
Drawer 抽屉
四向滑出的面板容器，支持遮罩、ESC 关闭与嵌套滚动。
Dropdown 下拉菜单
点击 / 悬停唤起的菜单，支持选中态、分割线与自定义面板。
Toast 轻提示
声明式 MToast 组件 + 编程式 toast.success()，六向角位堆叠。
v-ripple 涟漪
给任意元素加上 Material 风格的水波纹点击反馈。
