517 lines
14 KiB
Markdown
517 lines
14 KiB
Markdown
# 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**：提供便捷的函数式调用方式
|
||
|
||
更多详细信息和使用示例，请查看各组件的详细文档。
|