组件总览
minidev-components 是 MiniDev Studio 内置的 Web Components 组件库，采用 Material Design 3 设计语言，基于 Custom Elements 实现。
特性
- 28 个组件 覆盖基础、表单、展示、容器、媒体五大类
- Web Components 标准，Vue / React 通用
- CSS 变量主题 完整的 MD3 设计 Token 系统
- Bridge 集成 部分组件支持 SDK 程序化操控
- rpx 响应式 编译时自动转换为 vw
基础组件
| 组件 | 标签 | 说明 |
|---|---|---|
| View | <m-view> | 视图容器，支持 hover 反馈 |
| Text | <m-text> | 文本容器 |
| Button | <m-button> | 按钮 |
| Icon | <m-icon> | SVG 图标 |
| Image | <m-image> | 图片展示 |
| Divider | <m-divider> | 分割线 |
表单组件
| 组件 | 标签 | 说明 |
|---|---|---|
| Input | <m-input> | 单行输入框 |
| Textarea | <m-textarea> | 多行输入框 |
| Switch | <m-switch> | 开关 |
| Slider | <m-slider> | 滑块 |
| Radio | <m-radio-group> <m-radio> | 单选 |
| Checkbox | <m-checkbox-group> <m-checkbox> | 多选 |
| Picker | <m-picker> | 选择器 |
| Calendar | <m-calendar> | 日历 |
| Cascader | <m-cascader> | 级联选择 |
| Form | <m-form> | 表单容器 |
展示组件
| 组件 | 标签 | 说明 |
|---|---|---|
| Progress | <m-progress> | 进度条 |
| Circle | <m-circle> | 环形进度 |
| Loading | <m-loading> | 加载指示 |
| Skeleton | <m-skeleton> | 骨架屏 |
| Steps | <m-steps> <m-step> | 步骤条 |
| Collapse | <m-collapse> | 折叠面板 |
容器组件
| 组件 | 标签 | 说明 |
|---|---|---|
| ScrollView | <m-scroll-view> | 滚动视图 |
| Swiper | <m-swiper> | 轮播 |
| Popup | <m-popup> | 弹出层 |
媒体组件
| 组件 | 标签 | 说明 |
|---|---|---|
| Video | <m-video> | 视频播放 |
主题定制
通过 CSS 变量覆盖全局主题：
css
:root {
--m-color-primary: #6366f1;
--m-color-on-primary: #ffffff;
--m-color-surface: #ffffff;
--m-color-error: #b3261e;
--m-radius-md: 12rpx;
--m-font-size-md: 28rpx;
}完整变量请参考 主题定制。