# 组件列表
Shadow UI 提供30+ 常用 UI 组件,以下是所有组件的列表和简要描述:
# 基础组件
| 组件名称 | 版本 | 描述 |
|---|---|---|
| ui-alert | v2.3.11 | 提示框组件 |
| ui-avatar | v2.3.11 | 头像展示组件 |
| ui-avatar-group | v2.3.11 | 头像组组 |
| ui-backtop | v2.3.11 | 回到顶部组件 |
| ui-button | v2.3.11 | 多种样式的按钮组 |
| ui-card | v2.3.11 | 卡片容器组件 |
| ui-collapse | v2.3.11 | 可折叠面板组 |
| ui-color-picker | v2.3.11 | 颜色选择器组 |
| ui-digital | v2.3.11 | 数字显示组件 |
| ui-divider | v2.3.11 | 分割线组 |
| ui-drawer | v2.3.11 | 抽屉面板组件(垂直方向) |
| ui-drawer-h | v2.3.11 | 抽屉面板组件(水平方向) |
| ui-empty | v2.3.11 | 空状态组 |
# 表单组件
| 组件名称 | 版本 | 描述 |
|---|---|---|
| ui-form | v2.3.11 | 表单容器组件 |
| ui-form-checkbox | v2.3.11 | 复选框组件 |
| ui-form-checkbox-group | v2.3.11 | 复选框组组 |
| ui-form-checkbox-tag | v2.3.11 | 标签式复选框组件 |
| ui-form-input | v2.3.11 | 输入框组 |
| ui-form-item | v2.3.11 | 表单项组 |
| ui-form-numberBox | v2.3.11 | 数字输入框组 |
| ui-form-radio | v2.3.11 | 单选框组件 |
| ui-form-radio-group | v2.3.11 | 单选框组组 |
| ui-form-radio-tag | v2.3.11 | 标签式单选框组件 |
| ui-form-switch | v2.3.11 | 开关组 |
| ui-form-textarea | v2.3.11 | 文本域组 |
# 辅助组件
| 组件名称 | 版本 | 描述 |
|---|---|---|
| ui-bar-height | v2.3.11 | 导航栏高度组 |
| ui-body-height | v2.3.11 | 内容区域高度组件 |
# 功能组件
| 组件名称 | 版本 | 描述 |
|---|---|---|
| ui-headbox | v2.3.11 | 头部容器组件 |
| ui-image | v2.3.11 | 增强型图片组 |
| ui-load | v2.3.11 | 加载状态组 |
| ui-loading | v2.3.11 | 加载动画组件 |
| ui-loadmask | v2.3.11 | 加载遮罩组件 |
| ui-modal | v2.3.11 | 模态弹窗组 |
| ui-msg | v2.3.11 | 消息提示组件 |
| ui-navbar | v2.3.11 | 导航栏组 |
| ui-picker | v2.3.11 | 选择器组 |
| ui-preview | v2.3.11 | 图片预览组件 |
| ui-progress | v2.3.11 | 进度条组 |
| ui-slide | v2.3.11 | 轮播图组 |
| ui-slider | v2.3.11 | 滑块组件 |
| ui-sticky | v2.3.11 | 粘性定位组 |
| ui-tabs | v2.3.11 | 标签页组 |
| ui-tag | v2.3.11 | 标签组件 |
| ui-text | v2.3.11 | 增强型文本组 |
| ui-time | v2.3.11 | 时间显示组件 |
| ui-time-line | v2.3.11 | 时间轴组 |
| ui-time-rule | v2.3.11 | 时间标尺组件 |
| ui-title | v2.3.11 | 标题组件 |
| ui-tooltip | v2.3.11 | 提示框组件 |
| ui-upload | v2.3.11 | 文件上传组件 |
# 组件分类说明
# 基础组件
基础组件是构建页面的基本元素,如按钮、卡片、分割线等,用于搭建页面的基本结构和布局
# 表单组件
表单组件用于收集用户输入的信息,如输入框、复选框、单选框等,支持表单验证和双向数据绑定
# 辅助组件
辅助组件用于提供页面布局和适配相关的功能,如导航栏高度、内容区域高度等,帮助开发者更好地适配不同平台和设备
# 功能组件
功能组件提供了一些常用的交互功能,如弹窗、轮播图、进度条等,可以增强页面的交互性和用户体验
# 组件使用指南
# 基本使用
所有组件都可以通过以下方式使用
<template>
<ui-component-name prop1="value1" prop2="value2" @event="handleEvent">
<!-- 插槽内容 -->
</ui-component-name>
</template>
<script setup>
const handleEvent = () => {
// 事件处理逻辑
};
</script>
# 组件文档
点击每个组件的名称,可以查看该组件的详细文档,包括:
- 组件介绍
- 基本使用
- Props 说明
- Events 说明
- Slots 说明
- 示例代码
# 注意事项
- 使用组件时,请确保传入的 props 类型正确
- 对于需要异步加载数据的组件,请确保在数据加载完成后再渲染组
- 部分组件可能不支持所有平台,请查看组件文档中的平台兼容性说
- 可以通过主题定制来修改组件的外观和风
使用方法 →