# 组件列表

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 说明
  • 示例代码

# 注意事项

  1. 使用组件时,请确保传入的 props 类型正确
  2. 对于需要异步加载数据的组件,请确保在数据加载完成后再渲染组
  3. 部分组件可能不支持所有平台,请查看组件文档中的平台兼容性说
  4. 可以通过主题定制来修改组件的外观和风