shop-wx/doc/wot-design-uni/wot-design-uni组件清单.md

517 lines
14 KiB
Markdown
Raw Normal View History

# wot-design-uni 组件清单
本文档列出了 wot-design-uni 组件库中所有可用的组件及其简介。
> 文档生成时间: 2025-11-17
> 组件总数: 78
---
## 1. ActionSheet 动作面板
从底部弹出的动作菜单面板。
**文档路径**: `doc/wot-design-uni/docs/component/action-sheet.md`
## 2. Backtop 回到顶部
用于返回页面顶部的操作按钮。
**文档路径**: `doc/wot-design-uni/docs/component/backtop.md`
## 3. Badge 徽标
出现在按钮、图标旁的数字或状态标记。
**文档路径**: `doc/wot-design-uni/docs/component/badge.md`
## 4. Button 按钮
按钮用于触发一个操作,如提交表单或打开链接。
**文档路径**: `doc/wot-design-uni/docs/component/button.md`
## 5. CalendarView 日历面板组件
提供日历单选、多选、范围选择、周维度、月维度等功能。可以根据实际业务场景基于该组件进行封装高度定制化组件。
**文档路径**: `doc/wot-design-uni/docs/component/calendar-view.md`
## 6. Calendar 日历选择器
提供日历单选、多选、范围选择、周维度、月维度等功能。
**文档路径**: `doc/wot-design-uni/docs/component/calendar.md`
## 7. Card 卡片
用于展示商品的图片、价格等信息。
**文档路径**: `doc/wot-design-uni/docs/component/card.md`
## 8. Cell 单元格
单元格为列表中的单个展示项。
**文档路径**: `doc/wot-design-uni/docs/component/cell.md`
## 9. Checkbox 复选框
复选框用于在一组备选项中进行多选。
**文档路径**: `doc/wot-design-uni/docs/component/checkbox.md`
## 10. Circle 环形进度条
圆环形的进度条组件,支持进度渐变动画。
**文档路径**: `doc/wot-design-uni/docs/component/circle.md`
## 11. ColPicker 多列选择器
使用多列选择器来做级联,交互效果较好,多列选择器支持无限级选择。
**文档路径**: `doc/wot-design-uni/docs/component/col-picker.md`
## 12. Collapse 折叠面板
将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。
**文档路径**: `doc/wot-design-uni/docs/component/collapse.md`
## 13. ConfigProvider 全局配置
用于全局配置 Wot 组件,提供深色模式、主题定制等能力。
**文档路径**: `doc/wot-design-uni/docs/component/config-provider.md`
## 14. CountDown 倒计时
用于实时展示倒计时数值,支持毫秒精度。
**文档路径**: `doc/wot-design-uni/docs/component/count-down.md`
## 15. CountTo 数字滚动
数字滚动组件。
**文档路径**: `doc/wot-design-uni/docs/component/count-to.md`
## 16. Curtain 幕帘
一般用于公告类的图片弹窗。
**文档路径**: `doc/wot-design-uni/docs/component/curtain.md`
## 17. DatetimePicker 日期时间选择器
为 DatetimePickerView 组件的封装,在其内部构建好日期时间选项。
**文档路径**: `doc/wot-design-uni/docs/component/datetime-picker.md`
## 18. DatetimePickerView 日期时间选择器视图
为 Picker 组件的封装,在其内部构建好日期时间选项。
**文档路径**: `doc/wot-design-uni/docs/component/datetime-picker-view.md`
## 19. Divider 分割线
用于将内容分隔为多个区域。
**文档路径**: `doc/wot-design-uni/docs/component/divider.md`
## 20. DropMenu 下拉菜单
向下或向上弹出的菜单列表。
**文档路径**: `doc/wot-design-uni/docs/component/drop-menu.md`
## 21. Fab 悬浮按钮
悬浮动作按钮组件,按下可显示一组动作按钮。
**文档路径**: `doc/wot-design-uni/docs/component/fab.md`
## 22. FloatingPanel 浮动面板
浮动在页面底部的面板,用户可以通过上下拖动面板来浏览内容,常用于地图导航。
**文档路径**: `doc/wot-design-uni/docs/component/floating-panel.md`
## 23. Form 表单
用于数据录入、校验,支持输入框、单选框、复选框、文件上传等类型。
**文档路径**: `doc/wot-design-uni/docs/component/form.md`
## 24. Gap 间隔槽
一般用于页面布局时代替margin或者padding;或者充当(底部)占位元素。
**文档路径**: `doc/wot-design-uni/docs/component/gap.md`
## 25. Grid 宫格
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航。
**文档路径**: `doc/wot-design-uni/docs/component/grid.md`
## 26. Icon 图标
基于字体的图标集。
**文档路径**: `doc/wot-design-uni/docs/component/icon.md`
## 27. Img 图片
增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载完成、加载失败。
**文档路径**: `doc/wot-design-uni/docs/component/img.md`
## 28. ImgCropper 图片裁剪
图片剪裁组件,用于图片裁剪,支持拖拽、缩放、旋转等操作。
**文档路径**: `doc/wot-design-uni/docs/component/img-cropper.md`
## 29. IndexBar 索引栏
用于列表的索引分类显示和快速定位。
**文档路径**: `doc/wot-design-uni/docs/component/index-bar.md`
## 30. Input 输入框
用户可以在文本框里输入内容。
**文档路径**: `doc/wot-design-uni/docs/component/input.md`
## 31. InputNumber 计数器
由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字。
**文档路径**: `doc/wot-design-uni/docs/component/input-number.md`
## 32. Keyboard 虚拟键盘
虚拟数字键盘,用于输入数字、密码、身份证或车牌号等场景。
**文档路径**: `doc/wot-design-uni/docs/component/keyboard.md`
## 33. Layout 布局
用于快速进行布局。
**文档路径**: `doc/wot-design-uni/docs/component/layout.md`
## 34. Loading 加载指示器
加载动画,用于表示加载中的过渡状态。
**文档路径**: `doc/wot-design-uni/docs/component/loading.md`
## 35. Loadmore 加载更多
用于在列表底部展示加载状态。
**文档路径**: `doc/wot-design-uni/docs/component/loadmore.md`
## 36. MessageBox 弹框
弹出对话框,常用于消息提示、消息确认等,支持函数调用。
**文档路径**: `doc/wot-design-uni/docs/component/message-box.md`
## 37. Navbar 导航栏
为页面提供导航功能,常用于页面顶部。
**文档路径**: `doc/wot-design-uni/docs/component/navbar.md`
## 38. NoticeBar 通知栏
通知栏组件,用于在页面顶部展示通知提醒。
**文档路径**: `doc/wot-design-uni/docs/component/notice-bar.md`
## 39. Notify 消息通知
通知类组件,用于在页面顶部展示通知信息。
**文档路径**: `doc/wot-design-uni/docs/component/notify.md`
## 40. NumberKeyboard 数字键盘
虚拟数字键盘用于输入数字、密码或身份证等场景已废弃请使用Keyboard组件
**文档路径**: `doc/wot-design-uni/docs/component/number-keyboard.md`
## 41. Overlay 遮罩层
创建一个遮罩层,用于强调特定的页面元素,并阻止用户进行其他操作。
**文档路径**: `doc/wot-design-uni/docs/component/overlay.md`
## 42. Pagination 分页
当数据量过多时,使用分页分解数据。
**文档路径**: `doc/wot-design-uni/docs/component/pagination.md`
## 43. PasswordInput 密码输入框
带网格的输入框组件,可以用于输入密码、短信验证码等场景。
**文档路径**: `doc/wot-design-uni/docs/component/password-input.md`
## 44. Picker 选择器
Picker 组件为 popup 和 pickerView 的组合。
**文档路径**: `doc/wot-design-uni/docs/component/picker.md`
## 45. PickerView 选择器视图
选择器视图,用于从一组数据中选择单个或多个值。
**文档路径**: `doc/wot-design-uni/docs/component/picker-view.md`
## 46. Popover 气泡
常用于展示提示信息。
**文档路径**: `doc/wot-design-uni/docs/component/popover.md`
## 47. Popup 弹出层
弹出层组件,用于展示弹窗、信息提示等内容。
**文档路径**: `doc/wot-design-uni/docs/component/popup.md`
## 48. Progress 进度条
用于展示操作的当前进度。
**文档路径**: `doc/wot-design-uni/docs/component/progress.md`
## 49. Radio 单选框
单选框,用于在一组备选项中进行单选。
**文档路径**: `doc/wot-design-uni/docs/component/radio.md`
## 50. Rate 评分
用于快速的评价操作,或对评价进行展示。
**文档路径**: `doc/wot-design-uni/docs/component/rate.md`
## 51. Resize 监听元素尺寸变化
当组件包裹的文档流尺寸发生变化时,触发 resize 事件。
**文档路径**: `doc/wot-design-uni/docs/component/resize.md`
## 52. RootPortal 根节点传送
是否从页面中脱离出来,用于解决各种 fixed 失效问题,主要用于制作弹窗、弹出层等。
**文档路径**: `doc/wot-design-uni/docs/component/root-portal.md`
## 53. Search 搜索框
搜索框组件,支持输入框聚焦、失焦、输入、搜索、取消、清空事件。
**文档路径**: `doc/wot-design-uni/docs/component/search.md`
## 54. Segmented 分段器
分段器用于展示多个选项并允许用户选择其中单个选项。
**文档路径**: `doc/wot-design-uni/docs/component/segmented.md`
## 55. SelectPicker 单复选选择器
用于从一组选项中进行单选或多选。
**文档路径**: `doc/wot-design-uni/docs/component/select-picker.md`
## 56. Sidebar 侧边导航
垂直展示的导航栏,用于在不同的内容区域之间进行切换。
**文档路径**: `doc/wot-design-uni/docs/component/sidebar.md`
## 57. Signature 签名
用于签名场景,基于 Canvas 实现的签名组件。
**文档路径**: `doc/wot-design-uni/docs/component/signature.md`
## 58. Skeleton 骨架屏
用于等待加载内容所展示的占位图形组合,有动态效果加载效果,减少用户等待焦虑。
**文档路径**: `doc/wot-design-uni/docs/component/skeleton.md`
## 59. Slider 滑块
支持单向滑块和双向滑块。
**文档路径**: `doc/wot-design-uni/docs/component/slider.md`
## 60. SortButton 排序按钮
用于展示排序按钮,支持升序、降序、重置三种状态。
**文档路径**: `doc/wot-design-uni/docs/component/sort-button.md`
## 61. StatusTip 缺省提示
一般用于兜底占位展示。
**文档路径**: `doc/wot-design-uni/docs/component/status-tip.md`
## 62. Steps 步骤条
用于引导用户按照流程完成任务或向用户展示当前状态。
**文档路径**: `doc/wot-design-uni/docs/component/steps.md`
## 63. Sticky 粘性布局
粘性布局组件,用于在页面滚动时将元素固定在指定位置。
**文档路径**: `doc/wot-design-uni/docs/component/sticky.md`
## 64. SwipeAction 滑动操作
常用于单元格左右滑删除等手势操作。
**文档路径**: `doc/wot-design-uni/docs/component/swipe-action.md`
## 65. Swiper 轮播
用于创建轮播,它支持水平和垂直方向的滑动。
**文档路径**: `doc/wot-design-uni/docs/component/swiper.md`
## 66. Switch 开关
用来打开或关闭选项。
**文档路径**: `doc/wot-design-uni/docs/component/switch.md`
## 67. Table 表格
用于展示多条结构类似的数据,可对数据进行排序等操作。
**文档路径**: `doc/wot-design-uni/docs/component/table.md`
## 68. Tabs 标签页
标签页组件,用于在不同的内容区域之间进行切换。
**文档路径**: `doc/wot-design-uni/docs/component/tabs.md`
## 69. Tabbar 标签栏
底部导航栏,用于在不同页面之间进行切换。
**文档路径**: `doc/wot-design-uni/docs/component/tabbar.md`
## 70. Tag 标签
用于标记状态或者概括主要内容。
**文档路径**: `doc/wot-design-uni/docs/component/tag.md`
## 71. Text 文本
文本组件,用于展示文本信息。
**文档路径**: `doc/wot-design-uni/docs/component/text.md`
## 72. Textarea 文本域
用于输入多行文本信息。
**文档路径**: `doc/wot-design-uni/docs/component/textarea.md`
## 73. Toast 轻提示
轻提示组件,用于消息通知、加载提示、操作结果提示等场景,支持函数式调用。
**文档路径**: `doc/wot-design-uni/docs/component/toast.md`
## 74. Tooltip 文字提示
常用于展示提示信息。
**文档路径**: `doc/wot-design-uni/docs/component/tooltip.md`
## 75. Transition 动画
用于在元素进入或离开时应用过渡效果。
**文档路径**: `doc/wot-design-uni/docs/component/transition.md`
## 76. Upload 上传
图片、视频和文件上传组件。
**文档路径**: `doc/wot-design-uni/docs/component/upload.md`
## 77. Watermark 水印
在页面或组件上添加指定的图片或文字,可用于版权保护、品牌宣传等场景。
**文档路径**: `doc/wot-design-uni/docs/component/watermark.md`
## 78. useCountDown
用于处理倒计时相关的逻辑。
**文档路径**: `doc/wot-design-uni/docs/component/use-count-down.md`
---
## Hooks / Composables
以下是 wot-design-uni 提供的 Hooks组合式函数用于在代码中便捷地调用组件功能。
## 79. useMessage
用于便捷地调用 MessageBox 弹框组件。
**文档路径**: `doc/wot-design-uni/docs/component/use-message.md`
## 80. useNotify
用于便捷地调用 Notify 消息通知组件。
**文档路径**: `doc/wot-design-uni/docs/component/use-notify.md`
## 81. useToast
用于便捷地调用 Toast 轻提示组件。
**文档路径**: `doc/wot-design-uni/docs/component/use-toast.md`
## 82. useUpload
用于处理文件上传和选择相关的逻辑。
**文档路径**: `doc/wot-design-uni/docs/component/use-upload.md`
---
## 总结
本文档共列出了 **82 个可用组件和工具函数**
- **78 个 UI 组件**:涵盖基础组件、表单组件、反馈组件、展示组件、导航组件等
- **4 个 Hooks/Composables**:提供便捷的函数式调用方式
更多详细信息和使用示例,请查看各组件的详细文档。