景德镇陶瓷企业网站建设河海大学学风建设网站

景德镇陶瓷企业网站建设,河海大学学风建设网站,ppt模板大师,建立网站底线视频演示地址#xff1a; https://www.bilibili.com/video/BV1jomdBBE4H/ #x1f4cb; 目录 概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结 概述 ButtonGroup 是控件库中的按钮组组件#xff0c;将多个按钮组合在一起#xff0c;支持单选和多选两种…视频演示地址https://www.bilibili.com/video/BV1jomdBBE4H/ 目录概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结概述ButtonGroup是控件库中的按钮组组件将多个按钮组合在一起支持单选和多选两种模式适用于选项选择、筛选、状态切换等场景。设计理念按钮组采用统一视觉设计具有以下特点组合设计多个按钮无缝连接形成统一的视觉整体模式灵活支持单选single和多选multiple两种模式尺寸多样支持 small、medium、large 三种尺寸状态清晰选中状态使用主色背景未选中状态使用次要背景品牌标识左下角自动包含品牌标识圆圈红字PC主题统一所有样式配置都在代码中方便定制适用场景筛选条件时间筛选、状态筛选、类型筛选选项选择单选选项、多选选项状态切换启用/禁用、显示/隐藏标签选择分类标签、属性标签特性✨ 核心特性✅单选模式支持单选模式只能选择一个选项✅多选模式支持多选模式可以选择多个选项✅图标支持支持文字图标textIcon和图片图标icon✅多种尺寸支持 small、medium、large 三种尺寸✅禁用状态支持整体禁用和单项禁用✅品牌标识自动包含左下角品牌标识✅主题配置所有样式都可通过代码配置 视觉特点选中状态主色背景 白色文字未选中状态次要背景 主色文字禁用状态灰色背景 灰色文字 50% 透明度无缝连接按钮之间无缝连接形成统一整体圆角设计整体使用圆角内部按钮无圆角快速开始基础用法import{ButtonGroup,ButtonGroupItem}from../components/baseEntry Component struct MyPage{State selectedValue:string|numberoption1privateitems:ButtonGroupItem[][{label:选项1,value:option1},{label:选项2,value:option2},{label:选项3,value:option3}]build(){Column({space:20}){// 单选模式ButtonGroup({items:this.items,mode:single})// 多选模式ButtonGroup({items:this.items,mode:multiple})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}关于状态管理ButtonGroup使用内部状态管理选中值。如果需要外部控制选中值可以通过监听点击事件或使用状态管理来实现。API 参考Props属性名类型默认值说明itemsButtonGroupItem[][]按钮项列表必需modesingle | multiplesingle选择模式单选或多选buttonSizesmall | medium | largemedium按钮尺寸showBrandbooleantrue是否显示品牌标识disabledbooleanfalse是否禁用整个按钮组ButtonGroupItem 接口属性名类型默认值说明labelstring-按钮文字必需valuestring | number-按钮值必需disabledboolean?undefined是否禁用该项iconResourceStr?undefined图片图标可选textIconstring?undefined文字图标可选优先级高于 icon尺寸规格尺寸按钮高度字体大小图标大小内边距small28vp12vp14vp12vp左右medium36vp14vp16vp16vp左右large44vp16vp20vp20vp左右使用示例1. 基础单选按钮组Entry Component struct ButtonGroupExample1{privateitems:ButtonGroupItem[][{label:选项1,value:option1},{label:选项2,value:option2},{label:选项3,value:option3}]build(){Column({space:15}){ButtonGroup({items:this.items,mode:single})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}2. 多选按钮组Entry Component struct ButtonGroupExample2{privateitems:ButtonGroupItem[][{label:选项1,value:option1},{label:选项2,value:option2},{label:选项3,value:option3}]build(){Column({space:15}){ButtonGroup({items:this.items,mode:multiple})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}3. 带图标的按钮组Entry Component struct ButtonGroupExample3{privateitems:ButtonGroupItem[][{label:全部,value:all,textIcon:A},{label:待处理,value:pending,textIcon:P},{label:已完成,value:completed,textIcon:√}]build(){Column({space:15}){ButtonGroup({items:this.items,mode:single})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}4. 不同尺寸Entry Component struct ButtonGroupExample4{privateitems:ButtonGroupItem[][{label:小,value:small},{label:中,value:medium},{label:大,value:large}]build(){Column({space:20}){ButtonGroup({items:this.items,mode:single,buttonSize:small})ButtonGroup({items:this.items,mode:single,buttonSize:medium})ButtonGroup({items:this.items,mode:single,buttonSize:large})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}5. 禁用状态Entry Component struct ButtonGroupExample5{privateitems:ButtonGroupItem[][{label:可用,value:available},{label:不可用,value:unavailable,disabled:true},{label:维护中,value:maintenance}]build(){Column({space:20}){// 整个按钮组禁用ButtonGroup({items:this.items,mode:single,disabled:true})Divider().margin({top:20,bottom:20})// 部分按钮禁用ButtonGroup({items:this.items,mode:single})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}6. 筛选场景Entry Component struct FilterExample{build(){Column({space:20}){// 时间筛选Column({space:10}){Text(时间筛选).fontSize(16).fontColor(#111827).width(100%)ButtonGroup({items:[{label:全部,value:all},{label:今天,value:today},{label:本周,value:week},{label:本月,value:month}],mode:single,buttonSize:medium})}.width(100%)}.width(100%).height(100%).padding(20)}}7. 状态选择场景Entry Component struct StatusExample{build(){Column({space:20}){// 订单状态多选Column({space:10}){Text(订单状态多选).fontSize(16).fontColor(#111827).width(100%)ButtonGroup({items:[{label:待付款,value:unpaid,textIcon:P},{label:待发货,value:unshipped,textIcon:S},{label:已发货,value:shipped,textIcon:√},{label:已完成,value:completed,textIcon:C}],mode:multiple,buttonSize:medium})}.width(100%)}.width(100%).height(100%).padding(20)}}主题配置ButtonGroup 的所有样式都通过ComponentTheme配置所有配置都在代码中不依赖JSON文件。修改默认颜色import{ComponentTheme}from../theme/ComponentTheme// 修改主色影响选中状态的背景色ComponentTheme.PRIMARY_COLOR#007AFF// 修改次要背景色影响未选中状态的背景色ComponentTheme.BACKGROUND_SECONDARY#F5F5F5// 修改边框颜色ComponentTheme.BORDER_COLOR#E5E5E5// 修改圆角ComponentTheme.BORDER_RADIUS8批量配置import{ComponentTheme}from../theme/ComponentTheme// 使用 setTheme 方法批量配置ComponentTheme.setTheme({primaryColor:#007AFF,borderRadius:8,spacing:16})最佳实践1. 模式选择推荐根据使用场景选择模式单选模式single用于互斥选项如时间筛选、状态切换多选模式multiple用于可多选的选项如标签选择、属性筛选2. 尺寸选择small用于紧凑空间、工具栏medium默认尺寸适用于大多数场景large用于重要操作或大屏幕显示3. 选项数量建议选项数量在 2-5 个之间选项过多时考虑使用下拉菜单或其他组件选项文字保持简洁避免过长4. 图标使用使用文字图标textIcon确保兼容性图标应与文字含义相关保持图标风格统一5. 禁用状态使用整体禁用disabled控制整个按钮组使用单项禁用item.disabled控制单个选项禁用状态应清晰可见6. 响应式设计在小屏幕上考虑使用 smaller 尺寸保持按钮之间的合理间距确保触摸目标足够大至少 28vp常见问题Q1: ButtonGroup 和其他按钮有什么区别A: 主要区别在于使用场景PrimaryButton/SecondaryButton/TextButton/IconButton单个按钮用于操作ButtonGroup多个按钮组合用于选项选择、筛选ButtonGroup 更适合需要从多个选项中选择的场景。Q2: 什么时候使用单选什么时候使用多选A: 根据业务需求选择单选模式single选项互斥只能选择一个如时间筛选、状态切换多选模式multiple选项不互斥可以选择多个如标签选择、属性筛选Q3: 如何获取选中的值A:ButtonGroup使用内部状态管理。如果需要外部获取选中值可以通过以下方式监听点击事件在按钮点击时获取值状态管理使用全局状态管理如 Redux、MobX自定义事件创建自定义事件系统Q4: 可以动态更新选项吗A: 可以。通过更新items数组来动态更新选项State items:ButtonGroupItem[][{label:选项1,value:option1}]// 动态添加选项this.items.push({label:选项2,value:option2})this.items[...this.items]// 触发更新Q5: 如何自定义按钮样式A: 可以通过ComponentTheme自定义全局样式ComponentTheme.PRIMARY_COLOR#34C759// 选中状态背景色ComponentTheme.BACKGROUND_SECONDARY#F0F0F0// 未选中状态背景色ComponentTheme.BORDER_RADIUS12// 圆角大小Q6: 按钮组可以垂直排列吗A: 当前版本支持水平排列。如果需要垂直排列可以使用多个ButtonGroup垂直排列自定义实现垂直布局的按钮组总结ButtonGroup 是控件库中的按钮组组件具有以下核心特性组合设计多个按钮无缝连接形成统一整体模式灵活支持单选和多选两种模式尺寸多样三种尺寸满足不同场景需求功能完整支持图标、禁用等多种功能易于使用简单的 API开箱即用主题配置所有样式都可通过代码配置品牌标识自动包含品牌标识保持视觉统一关键要点✅ 使用mode属性选择单选或多选模式✅ 使用buttonSize属性选择合适尺寸✅ 使用items属性配置按钮项✅ 使用disabled属性控制按钮组状态✅ 使用textIcon或icon添加图标✅ 通过ComponentTheme自定义全局样式适用场景筛选条件选择选项选择状态切换标签选择属性筛选下一篇预告TextInput文本输入框详解本文档属于《鸿蒙PC UI控件库开发系列文章》第6篇