Components · V1.0.0
MXWUI 组件列表
共 80 个组件，按六大分类整理。点击进入对应文档页查看用法与参数。
Basic
基础组件
按钮、图标、标签、徽标、头像、分割线、安全区与蒙层
9 个
- Btn按钮适用于需要用户触发操作的场景。
- Icon图标共有 203 个图标，涵盖日常使用需求，可自定义颜色、自定义大小。
- Tag标签常用于标题后、跟随标题，展示商品的运营信息、辅助信息等。
- Badge徽标徽标，红点、数字或文字。用于告诉用户待处理的事物或更新数。适用于新消息、新功能、新服务等内容的提醒。
- CornerMark角标主要用于商品的左上角、右上角的标识性角标。
- Avatar头像适用于需要展示用户头像的地方。
- Divider分割线区隔内容的分割线。可用于对不同章节的文本段落进行分割，也可对行内文字/链接进行分隔。
- SafeArea安全区刘海屏安全区域占位组件。当页面全屏展示时，可借助安全区进行屏幕顶部和底部适配（如刘海、底部指示条）。
- Mask蒙层统一的蒙层组件，常用于弹窗、引导等场景。
Form
表单组件
输入、选择、步进、滑块、日历、日期时间与上传
20 个
- Input输入框一般用在表单，需要进行信息的收集的地方，提供输入功能，基于微信小程序 input 组件的封装。
- Textarea文本域适用于长文本输入的场景，基于微信小程序的 `textarea` 组件开发。
- Switch开关常用于一些设置操作的场景。
- Checkbox复选框用于选项之间的选择，一般用于在一组选项中选择多个值。
- CheckboxGroup复选框组用于选项之间的选择，一般用于在一组选项中选择多个值。
- Radio单选框用于互斥选项之间的选择，一般用于在一组选项中选择一个值。
- RadioGroup单选框组用于互斥选项之间的选择，一般用于在一组选项中选择一个值。
- Label标签按钮多用在抽屉场景内的单/多选标签样式。
- LabelGroup标签按钮组在一组数据中选择一个或多个值，多用于筛选场景。
- ListSelect列表选择列表形式的选择组件，支持单选和多选。
- ListPicker列表下拉下拉选择器，支持普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器。
- SelectContact选人选人能力：面向赠送、代付、拉群等「找人」场景，支持推荐联系人、字母索引通讯录与关键词搜索。参考 [Ant Design Mini SelectContact](https://ant-design-mini.antgroup.com/components/select-contact)。
- Stepper步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。
- Slider滑块可以通过移动滑块在某一范围内取值。用于在一定范围内获取单个或者区间数值。
- NumberKeyboard数字键盘自定义数字键盘，适用于金额、验证码、密码、身份证号等数字输入场景。
- Calendar日历适用于需要日期选择的场景。
- Datetime日期时间适用于需要同时选择日期和时间的场景。
- DatetimeRange日期时间范围适用于需要同时选择日期时间范围的场景，一般是一个时间段。
- Upload上传上传图片、视频或文件。组件负责选择、预览、删除与上传态展示；实际上传由业务监听事件后完成，再回写 `src` / `status`。
- UploadGroup上传组上传多个图片、视频或文件。负责多列布局与数量限制；单项能力委托 `mx-upload`。
Display
展示组件
列表、轮播、折叠、进度、空态、骨架屏与水印
13 个
- ListBasic基础列表常用于个人中心、设置、通用信息列表等场景。
- ListSwitch开关列表适用于有开关按钮的列表项场景。
- SwipeAction滑动操作列表的功能扩展。通过滑动操作来展示隐藏的功能菜单，常用于删除、置顶、收藏等场景。
- Table表格展示行列数据。支持固定列、列排序、局部滚动、铺满布局、斑马纹与空状态插槽。
- Swiper轮播用于宣传图或广告图的轮播切换。
- Collapse折叠面板适用于帮助、问题分类等场景。
- ProgressBar进度条用于展示用户操作、任务的进度。支持条形与环形两种形态。
- Countdown倒计时用于展示剩余时间，支持按时长或起止时间戳倒计时，可展示天数，并支持前后缀与颜色自定义。
- Empty空数据用于展示空数据时的情况，支持自定义图标，支持引导按钮，单按钮、双按钮。
- Result操作结果对前一步操作的结果进行反馈。当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
- Loading加载中用于提示局部或页面正在加载中。支持旋转圆环（spin）、点状圆环（dot）、矩形段圆环（petal）与三点跳动（mini）四种形态。
- Skeleton骨架屏在需要等待加载内容的位置提供占位图形组合。适用于图文信息较多的首页、列表与卡片；网络较慢且仅首次加载时使用。
- WaterMark水印给页面或局部区域添加水印，支持文字、多行文案与图片水印，常用于防泄密、版权标识等场景。
Feedback
反馈组件
Toast、引导、弹窗、操作栏、气泡、下拉菜单与吸底交互
18 个
- Toast轻提示对操作结果的轻量级反馈，无需用户操作即可自行消失。最长文案不超过 2 行，最多可以显示 24 个字符，文案过长会被截断。
- Notice通知栏一般用于活动提醒或者系统权限申请等吸引用户关注但又不强制用户去处理的场景。
- Lead引导适用于新功能引导、功能强调等场景。
- Dialog基础弹窗适用于消息通知、用户操作确认、协议展示等场景。
- Confirm确认弹窗适用于需要用户操作确认的场景，只能通过按钮来关闭，基于基础弹窗组件的封装。
- Alert信息弹窗适用于消息通知、用户操作反馈等无需用户确认的场景，基于基础弹窗组件封装，提供少量可修改属性，如有定制需求请用基础弹窗组件（Dialog 组件）。
- DialogBottom底部基础弹窗由底部出现的弹出层容器，用于展示弹窗、信息提示等内容。
- DialogBasic底部弹窗由底部出现的展示弹窗。
- DialogText底部文本弹窗由底部出现的展示弹窗，展示基本的文本和按钮。
- DialogColumn分栏弹窗由底部出现的分栏弹窗，存在级联关系。
- ActionSheet按钮操作栏由底部出现的列表形式的操作按钮栏弹窗。
- Popup侧边弹窗适用于侧边打开弹窗的场景，提供容器，内容完全自定义。
- Popover气泡弹出框点击元素，弹出气泡式的菜单或提示。用于导航功能的气泡菜单唤起，或展示轻量提示信息。
- Dropdown下拉菜单点击触发器弹出的下拉菜单，用于操作列表、更多功能入口等场景。
- Share分享弹窗分享弹窗组件，只提供基础的样式，具体逻辑需要自行实现。
- FixedFootFixedFoot吸附在页面底部位置，做了刘海屏的兼容处理。
- FootBtns吸底按钮组适用于固定在底部的按钮组场景，支持一个按钮、两个按钮、图标+按钮、自定义+按钮等样式。
- FootInput吸底输入框常用于浮动输入的场景，比如评论、回复等。
Business
业务组件
商品卡片、优惠券、评分、签名、验证码、登录与协议
9 个
- SaleItem商品卡片适用于列表商品展示的场景。
- Coupon优惠券通用优惠券展示组件。支持大/小尺寸、水平/竖直/多列排列、禁用态、行动按钮与主题色定制。
- Level等级适用于用户等级、卖家等级、会员等级等场景。
- Rate评分用于展示事物评级以及快速打分。
- Signature签名用于手写签名场景，基于 Canvas 实现，支持清除、导出临时图片、禁用与只读。
- VerificationCode验证码适用于手机号验证码发送、输入和确认场景。
- PhoneLogin手机号登录基于微信小程序「手机号快速验证 / 实时验证」能力，封装一键登录按钮与协议确认。组件本身不解密手机号，授权成功后返回动态令牌 `code`，需由业务服务端调用微信接口换取手机号。
- Protocol协议适用于一些需要用户确认或同意协议后才能操作的场景。
- ProtocolDialog弹窗协议适用于用户协议、隐私政策等需要确认同意的场景，支持标题显隐、取消/确认按钮以及强制阅读倒计时。