六、表单元素（04）：开关
开关组件是一种直观的UI控件，用于功能启用/禁用、用户设置项和状态指示控制。通过点击滑块可切换开关状态，支持自定义外观属性，包括宽高、轨道颜色、滑块颜色及边框样式等。该组件默认关闭，可灵活配置尺寸和颜色方案，适用于系统设置、权限管理等场景，提供简洁高效的交互体验。
·
开关组件用于表示功能的启用与关闭状态。用户可通过点击滑块控制其状态变更，常用于系统设置、权限控制、通知开关等场景。开关具有简洁、直观的交互方式，可灵活配置外观尺寸和颜色，适配各种界面风格。
应用场景
- 功能启用/禁用
用于控制某项功能是否生效，例如“自动播放”、“开启定位服务”等。
- 用户设置项
用于在设置页面中启用或关闭个人偏好，例如“夜间模式”、“推送提醒”等。
- 状态指示控制
作为状态开关的视觉反馈，例如“是否在线”、“是否公开”等布尔状态展示。
常用属性及说明
| 属性名称 | 作用 | 默认值 |
|---|---|---|
| 开关初始值 | 控制开关默认是开启还是关闭 | 关闭 |
| 宽 | 控制开关组件整体宽度 | 55 |
| 高 | 控制开关组件整体高度 | 26 |
| 活跃轨道颜色 | 开关开启状态下轨道的背景颜色 | #FF8BC34A |
| 非活跃轨道颜色 | 开关关闭状态下轨道的背景颜色 | #FF9E9E9E |
| 活跃凸轮颜色 | 开关开启状态下滑块（凸轮）的颜色 | #FFFFFFFF |
| 非活跃凸轮颜色 | 开关关闭状态下滑块颜色 | #FFFFFFFF |
| 轨道边框高度 | 控制轨道边框的宽度 | 0 |
| 凸轮边框高度 | 控制滑块（凸轮）的边框线宽 | 0 |
| 活跃轨道边框颜色 | 开启状态下轨道边框颜色 | #FF40C4FF |
| 非活跃轨道边框颜色 | 关闭状态下轨道边框颜色 | #1F000000 |
| 活跃凸轮边框颜色 | 开启状态下滑块边框颜色 | #FFFFFFFF |
| 非活跃凸轮边框颜色 | 关闭状态下滑块边框颜色 | #1F000000 |
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
5
0- 0
已为社区贡献18条内容
所有评论(0)