网站维护主要需要会什么南宁高新区建设房产局网站

网站维护主要需要会什么,南宁高新区建设房产局网站,wordpress 分享后阅读,wordpress表单中文版视频演示地址#xff1a; https://www.bilibili.com/video/BV1jomdBBE4H/ #x1f4cb; 目录 概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结 概述 IconButton 是控件库中的图标按钮组件#xff0c;仅显示图标#xff0c;无文字#xff0c;适用于工具…视频演示地址https://www.bilibili.com/video/BV1jomdBBE4H/ 目录概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结概述IconButton是控件库中的图标按钮组件仅显示图标无文字适用于工具栏、操作按钮等场景。与文字按钮的主要区别在于PrimaryButton/SecondaryButton/TextButton显示文字可带图标IconButton仅显示图标无文字设计理念图标按钮采用极简设计具有以下特点纯图标设计仅显示图标节省空间形状灵活支持圆形和方形两种形状尺寸多样支持 small、medium、large 三种尺寸large 尺寸为 80vp × 80vp图标 40vp品牌标识左下角自动包含品牌标识圆圈红字PC主题统一所有样式配置都在代码中方便定制通用字符使用 ASCII 字符作为图标确保在所有系统上都能正确显示图标字符映射为了确保图标在所有系统上都能正确显示推荐使用以下 ASCII 字符字符含义用途SSettings设置设置、配置相关操作UUser用户用户、账户相关操作RRefresh刷新刷新、重新加载DDelete删除删除操作EEdit编辑编辑、修改操作Add添加添加、新建操作√Check确认确认、成功操作×Close关闭关闭、取消操作...More更多更多选项BBold粗体文本格式化IItalic斜体文本格式化对齐左对齐、居中、右对齐特性✨ 核心特性✅纯图标设计仅显示图标无文字✅多种形状支持圆形circle和方形square✅多种尺寸支持 small、medium、large 三种尺寸large 尺寸为 80vp × 80vp图标 40vp✅加载状态内置加载动画✅禁用状态支持禁用状态自动调整样式✅自定义颜色支持自定义图标颜色和背景颜色✅品牌标识自动包含左下角品牌标识✅主题配置所有样式都可通过代码配置 视觉特点圆形按钮完全圆形适合工具栏和操作按钮方形按钮圆角方形适合列表操作和卡片操作正常状态图标颜色为主题主色背景透明悬停状态背景色变化通过系统自动处理禁用状态图标变灰 50% 透明度快速开始基础用法import{IconButton}from../components/baseEntry Component struct MyPage{build(){Column({space:20}){// 基础圆形图标按钮使用文字图标IconButton({textIcon:S// S Settings设置})// 方形图标按钮IconButton({textIcon:...,// ... More更多shape:square})// 不同尺寸Row({space:12}){IconButton({textIcon:,buttonSize:small})IconButton({textIcon:,buttonSize:medium})IconButton({textIcon:,buttonSize:large})}}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}关于点击事件处理IconButton的onClickBuilder属性是BuilderParam类型需要使用Builder或LocalBuilder方法初始化。在实际项目中推荐使用以下方式处理点击事件状态管理方式通过State变量和普通Button的onClick来处理自定义事件系统创建自定义事件处理机制Builder 方法如果需要使用onClickBuilder需要定义Builder方法本文档中的示例主要展示按钮的视觉效果和样式配置点击事件处理可以通过上述方式实现。API 参考Props属性名类型默认值说明iconResourceStr?undefined按钮图标可选图片资源textIconstring?undefined文字图标可选ASCII字符或Unicode字符优先级高于 icon。推荐使用S设置, U用户, R刷新, D删除, E编辑, 添加, √确认, ×关闭shapecircle | squarecircle按钮形状buttonSizesmall | medium | largemedium按钮尺寸loadingbooleanfalse是否加载中disabledbooleanfalse是否禁用showBrandbooleantrue是否显示品牌标识iconColorstring?undefined图标颜色可选默认使用主题色buttonBackgroundColorstring?undefined背景颜色可选默认透明onClickBuilderBuilderParam () void?undefined点击事件回调需要使用 Builder 或 LocalBuilder 方法尺寸规格尺寸按钮大小图标大小圆角圆形圆角方形small32vp × 32vp16vp16vp4vpmedium40vp × 40vp20vp20vp8vplarge80vp × 80vp40vp40vp12vp使用示例1. 基础按钮Entry Component struct ButtonExample1{build(){Column({space:15}){// 圆形图标按钮使用文字图标IconButton({textIcon:S// S Settings设置})// 方形图标按钮IconButton({textIcon:...,// ... More更多shape:square})// 带背景的图标按钮IconButton({textIcon:,// Add添加buttonBackgroundColor:#F0F7FF})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}2. 不同尺寸Entry Component struct ButtonExample2{build(){Column({space:15}){Row({space:12}){IconButton({textIcon:S,// S Settings设置buttonSize:small})IconButton({textIcon:S,buttonSize:medium})IconButton({textIcon:S,buttonSize:large})}.width(100%).justifyContent(FlexAlign.Center)}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}3. 不同形状Entry Component struct ButtonExample3{build(){Column({space:15}){Row({space:12}){// 圆形按钮IconButton({textIcon:U,// U User用户shape:circle})// 方形按钮IconButton({textIcon:U,shape:square})}.width(100%).justifyContent(FlexAlign.Center)}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}4. 自定义颜色Entry Component struct ButtonExample4{build(){Column({space:15}){Row({space:12}){// 默认颜色IconButton({textIcon:S// S Settings设置})// 自定义图标颜色IconButton({textIcon:√,// √ Check确认/成功iconColor:#34C759})// 自定义背景颜色IconButton({textIcon:S,buttonBackgroundColor:#F0F7FF})// 自定义图标和背景颜色IconButton({textIcon:×,// × Close关闭/删除iconColor:#FF3B30,buttonBackgroundColor:#FFEBEE})}.width(100%).justifyContent(FlexAlign.SpaceAround)}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}5. 加载状态Entry Component struct ButtonExample5{State loading:booleanfalse// 处理加载操作handleLoad(){this.loadingtrue// 模拟异步操作setTimeout((){this.loadingfalseconsole.info(加载完成)},2000)}build(){Column({space:20}){IconButton({textIcon:R,// R Refresh刷新loading:this.loading})// 使用普通按钮触发加载状态Button(){Text(this.loading?加载中...:点击刷新)}.onClick((){this.handleLoad()}).enabled(!this.loading)Text(点击按钮查看加载状态).fontSize(12).fontColor(#999999)}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}6. 禁用状态Entry Component struct ButtonExample6{State canDelete:booleanfalsebuild(){Column({space:20}){IconButton({textIcon:D,// D Delete删除disabled:!this.canDelete})Row({space:10}){Text(删除权限).fontSize(14)Toggle({type:ToggleType.Switch,isOn:this.canDelete}).onChange((isOn:boolean){this.canDeleteisOn})Text(this.canDelete?已开启:已关闭).fontSize(14).fontColor(this.canDelete?#10B981:#EF4444)}}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}7. 工具栏场景Entry Component struct ToolbarExample{build(){Column({space:20}){// 工具栏Row({space:8}){IconButton({textIcon:B,buttonSize:small,shape:square})IconButton({textIcon:I,buttonSize:small,shape:square})IconButton({textIcon:U,buttonSize:small,shape:square})Divider().vertical(true).height(24).margin({left:8,right:8})IconButton({textIcon:,// 左对齐buttonSize:small,shape:square})IconButton({textIcon:,// 居中对齐buttonSize:small,shape:square})IconButton({textIcon:,// 右对齐buttonSize:small,shape:square})}.width(100%).padding(12).backgroundColor(#F9FAFB).borderRadius(8)}.width(100%).height(100%).padding(20)}}8. 列表操作场景Entry Component struct ListActionExample{build(){Column({space:20}){// 列表项操作Row({space:12}){Text(文件名称.txt).fontSize(14).layoutWeight(1)IconButton({textIcon:E,// E Edit编辑buttonSize:small,shape:square})IconButton({textIcon:D,// D Delete删除buttonSize:small,shape:square,iconColor:#FF3B30})}.width(100%).padding(12).backgroundColor(#FFFFFF).borderRadius(8).shadow({radius:4,color:#00000010,offsetX:0,offsetY:2})}.width(100%).height(100%).padding(20)}}9. 卡片操作场景Entry Component struct CardActionExample{build(){Column({space:20}){// 卡片右上角操作Stack(){Column({space:8}){Text(卡片标题).fontSize(16).fontWeight(FontWeight.Bold)Text(卡片内容描述).fontSize(14).fontColor(#666666)}.width(100%).alignItems(HorizontalAlign.Start)IconButton({textIcon:...,// ... More更多buttonSize:small,shape:circle}).align(Alignment.TopEnd)}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12).shadow({radius:4,color:#00000010,offsetX:0,offsetY:2})}.width(100%).height(100%).padding(20)}}10. 按钮组合Entry Component struct ButtonGroupExample{build(){Column({space:20}){// 操作按钮组Row({space:12}){IconButton({textIcon:,buttonSize:medium,shape:circle,buttonBackgroundColor:#F0F7FF})IconButton({textIcon:E,// E Edit编辑buttonSize:medium,shape:circle})IconButton({textIcon:D,// D Delete删除buttonSize:medium,shape:circle,iconColor:#FF3B30})}.width(100%).justifyContent(FlexAlign.Center)}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}主题配置IconButton 的所有样式都通过ComponentTheme配置所有配置都在代码中不依赖JSON文件。修改默认颜色import{ComponentTheme}from../theme/ComponentTheme// 修改主题主色影响 IconButton 的默认图标颜色ComponentTheme.PRIMARY_COLOR#007AFF// 修改文字主色影响 IconButton 的默认图标颜色ComponentTheme.TEXT_PRIMARY#000000// 修改禁用文字颜色ComponentTheme.TEXT_DISABLED#CCCCCC// 修改背景次要色影响禁用状态的背景ComponentTheme.BACKGROUND_SECONDARY#F5F5F5批量配置import{ComponentTheme}from../theme/ComponentTheme// 使用 setTheme 方法批量配置ComponentTheme.setTheme({primaryColor:#007AFF,borderRadius:8,spacing:16})自定义主题// 在应用启动时配置import{ComponentTheme}from./theme/ComponentTheme// 设置自定义主色ComponentTheme.TEXT_PRIMARY#34C759// 绿色最佳实践1. 形状选择推荐根据使用场景选择形状圆形circle用于工具栏、浮动操作按钮、卡片操作方形square用于列表操作、表格操作、紧凑空间2. 尺寸选择small用于工具栏、列表操作、表格操作medium默认尺寸适用于大多数场景large用于重要操作或大屏幕显示3. 颜色使用默认使用主题主色保持视觉统一危险操作使用红色如删除按钮特殊操作可使用自定义颜色避免在同一页面使用过多不同颜色4. 图标选择推荐使用 ASCII 字符确保在所有系统上都能正确显示字符映射使用标准字符映射S设置, U用户, R刷新, D删除, E编辑, 添加, √确认, ×关闭清晰易识别选择清晰、易识别的字符尺寸适配确保图标在不同尺寸下都清晰可见large 尺寸图标为 40vp5. 工具栏使用将相关操作分组使用分隔线区分不同功能组保持一致的尺寸和形状6. 响应式设计在小屏幕上考虑使用 smaller 尺寸保持按钮之间的合理间距确保触摸目标足够大至少 32vp常见问题Q1: IconButton 和其他按钮有什么区别A: 主要区别在于显示内容PrimaryButton/SecondaryButton/TextButton显示文字可带图标IconButton仅显示图标无文字IconButton 更适合工具栏、操作按钮等需要节省空间的场景。Q2: 什么时候使用圆形什么时候使用方形A: 根据使用场景选择圆形circle工具栏、浮动操作按钮、卡片操作、需要突出显示的操作方形square列表操作、表格操作、紧凑空间、需要对齐的场景Q3: 如何自定义按钮颜色A: 有两种方式通过 iconColor 和 buttonBackgroundColor 属性单个按钮IconButton({textIcon:S,// S Settings设置iconColor:#34C759,buttonBackgroundColor:#F0F9F4})通过 ComponentTheme全局配置ComponentTheme.TEXT_PRIMARY#34C759ComponentTheme.BACKGROUND_SECONDARY#F0F9F4Q4: 如何处理按钮点击事件A:onClickBuilder是BuilderParam类型需要使用Builder或LocalBuilder方法。推荐使用状态管理或自定义事件系统Entry Component struct MyPage{State count:number0handleClick(){this.countconsole.info(按钮被点击)}build(){Column({space:20}){// 使用普通按钮处理点击Button(){Image($r(app.media.icon_settings)).width(20).height(20)}.onClick((){this.handleClick()})// 使用 IconButton 展示样式IconButton({textIcon:S// S Settings设置})Text(点击次数${this.count})}.width(100%).height(100%).padding(20)}}Q5: IconButton 可以用于工具栏吗A: 可以。IconButton 非常适合用于工具栏场景Row({space:8}){IconButton({textIcon:B,// B Bold粗体buttonSize:small,shape:square})IconButton({textIcon:I,// I Italic斜体buttonSize:small,shape:square})}Q6: 按钮大小可以自定义吗A: 目前支持三种预设尺寸small、medium、large。如果需要自定义大小可以通过修改ComponentTheme中的相关配置或者使用其他按钮组件如 TextButton配合图标实现。总结IconButton 是控件库中的图标按钮组件具有以下核心特性纯图标设计仅显示图标节省空间形状灵活支持圆形和方形两种形状尺寸多样三种尺寸满足不同场景需求功能完整支持加载、禁用等多种状态易于使用简单的 API开箱即用主题配置所有样式都可通过代码配置品牌标识自动包含品牌标识保持视觉统一关键要点✅ 使用shape属性选择合适形状✅ 使用buttonSize属性选择合适尺寸✅ 使用iconColor和buttonBackgroundColor自定义颜色✅ 使用loading属性处理异步操作✅ 使用disabled属性控制按钮状态✅ 通过ComponentTheme自定义全局样式适用场景工具栏操作按钮列表项操作按钮卡片操作按钮表格操作按钮浮动操作按钮需要节省空间的按钮场景下一篇预告ButtonGroup按钮组详解本文档属于《鸿蒙PC UI控件库开发系列文章》第5篇