企业官网建设流程全解析

做电商网站外包,国外最新十大新闻,一般卖机械行业的做哪些网站,长春seo搜索排名视频演示地址#xff1a; https://www.bilibili.com/video/BV1jomdBBE4H/ #x1f4cb; 目录 概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结 概述 Label 是控件库中的基础标签组件#xff0c;支持多种尺寸、颜色、图标等功能#xff0c;适用于状态标…视频演示地址https://www.bilibili.com/video/BV1jomdBBE4H/ 目录概述特性快速开始API 参考使用示例主题配置最佳实践常见问题总结概述Label是控件库中的基础标签组件支持多种尺寸、颜色、图标等功能适用于状态标识、分类标签、优先级标记等场景。设计理念基础标签采用简洁清晰设计具有以下特点多种颜色支持 default、primary、secondary、success、warning、error、info 等颜色多种尺寸支持 small、medium、large 三种尺寸图标支持支持显示文字图标品牌标识左下角自动包含品牌标识圆圈红字PC主题统一所有样式配置都在代码中方便定制适用场景状态标识订单状态、任务状态、审核状态等分类标签商品分类、内容分类、标签分类等优先级标记任务优先级、重要程度等信息展示简单的信息标签展示特性✨ 核心特性✅多种颜色支持 7 种颜色类型default、primary、secondary、success、warning、error、info✅多种尺寸支持 small、medium、large 三种尺寸✅图标支持支持显示文字图标emoji、特殊字符✅灵活宽度支持固定宽度、百分比宽度、自适应宽度✅品牌标识自动包含左下角品牌标识✅主题配置所有样式都可通过代码配置 视觉特点默认颜色灰色背景 灰色边框 深色文字主题颜色彩色背景 白色文字无边框尺寸变化字体大小、内边距、高度随尺寸变化图标显示图标显示在文字左侧快速开始基础用法import{Label}from../components/baseEntry Component struct MyPage{build(){Column({space:20}){// 基础标签Label({text:默认标签})// 带颜色的标签Label({text:主要标签,color:primary})Label({text:成功标签,color:success})Label({text:警告标签,color:warning})Label({text:错误标签,color:error})// 带图标的标签Label({text:成功,color:success,showIcon:true,textIcon:✓})}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}API 参考Props属性名类型默认值说明textstring标签文本必需colorLabelColordefault标签颜色类型labelSizesmall | medium | largemedium标签尺寸showIconbooleanfalse是否显示图标textIconstring?undefined图标文本文字图标showBrandbooleantrue是否显示品牌标识labelWidthstring | number?undefined标签宽度不设置则自适应LabelColor 类型typeLabelColordefault|primary|secondary|success|warning|error|info颜色类型说明背景色文字色default默认浅灰色深色primary主要主题色白色secondary次要灰色白色success成功绿色白色warning警告橙色白色error错误红色白色info信息蓝色白色尺寸规格尺寸字体大小高度内边距左右图标大小small12vp24vp8vp14vpmedium14vp28vp10vp16vplarge16vp32vp12vp18vp使用示例1. 基础标签Entry Component struct LabelExample1{build(){Column({space:15}){Label({text:默认标签})Label({text:主要标签,color:primary})Label({text:次要标签,color:secondary})Label({text:成功标签,color:success})Label({text:警告标签,color:warning})Label({text:错误标签,color:error})Label({text:信息标签,color:info})}.width(100%).padding(20)}}2. 不同尺寸Entry Component struct LabelExample2{build(){Column({space:15}){Row({space:15}){Label({text:小尺寸,labelSize:small})Label({text:小尺寸,labelSize:small,color:primary})Label({text:小尺寸,labelSize:small,color:success})}Row({space:15}){Label({text:中等尺寸,labelSize:medium})Label({text:中等尺寸,labelSize:medium,color:primary})Label({text:中等尺寸,labelSize:medium,color:success})}Row({space:15}){Label({text:大尺寸,labelSize:large})Label({text:大尺寸,labelSize:large,color:primary})Label({text:大尺寸,labelSize:large,color:success})}}.width(100%).padding(20)}}3. 带图标Entry Component struct LabelExample3{build(){Row({space:15}){Label({text:成功,color:success,showIcon:true,textIcon:✓})Label({text:警告,color:warning,showIcon:true,textIcon:⚠})Label({text:错误,color:error,showIcon:true,textIcon:✕})Label({text:信息,color:info,showIcon:true,textIcon:ℹ})Label({text:主要,color:primary,showIcon:true,textIcon:★})}.width(100%).padding(20).flexWrap(FlexWrap.Wrap)}}4. 订单状态标签Entry Component struct OrderStatusLabels{build(){Column({space:20}){Text(订单状态).fontSize(20).fontWeight(FontWeight.Bold)Row({space:10}){Label({text:待支付,color:warning,showIcon:true,textIcon:⏰})Label({text:已支付,color:success,showIcon:true,textIcon:✓})Label({text:已发货,color:info,showIcon:true,textIcon:})Label({text:已完成,color:success,showIcon:true,textIcon:✓})Label({text:已取消,color:error,showIcon:true,textIcon:✕})}.flexWrap(FlexWrap.Wrap)}.width(100%).padding(30)}}5. 商品分类标签Entry Component struct CategoryLabels{build(){Column({space:20}){Text(商品分类).fontSize(20).fontWeight(FontWeight.Bold)Row({space:10}){Label({text:电子产品,color:primary})Label({text:服装,color:secondary})Label({text:食品,color:success})Label({text:图书,color:info})Label({text:家居,color:warning})}.flexWrap(FlexWrap.Wrap)}.width(100%).padding(30)}}6. 任务优先级标签Entry Component struct PriorityLabels{build(){Column({space:20}){Text(任务优先级).fontSize(20).fontWeight(FontWeight.Bold)Row({space:10}){Label({text:高优先级,color:error,showIcon:true,textIcon:})Label({text:中优先级,color:warning,showIcon:true,textIcon:})Label({text:低优先级,color:success,showIcon:true,textIcon:})}.flexWrap(FlexWrap.Wrap)}.width(100%).padding(30)}}7. 不同宽度Entry Component struct LabelWidthExample{build(){Column({space:15}){Label({text:固定宽度标签,color:primary,labelWidth:200})Label({text:百分比宽度标签,color:success,labelWidth:80%})Label({text:自适应宽度标签默认,color:info})}.width(100%).padding(20)}}8. 审核状态标签Entry Component struct ReviewStatusLabels{build(){Column({space:20}){Text(审核状态).fontSize(20).fontWeight(FontWeight.Bold)Row({space:10}){Label({text:待审核,color:warning,showIcon:true,textIcon:⏳})Label({text:审核中,color:info,showIcon:true,textIcon:})Label({text:已通过,color:success,showIcon:true,textIcon:✓})Label({text:已拒绝,color:error,showIcon:true,textIcon:✕})}.flexWrap(FlexWrap.Wrap)}.width(100%).padding(30)}}9. 用户角色标签Entry Component struct UserRoleLabels{build(){Column({space:20}){Text(用户角色).fontSize(20).fontWeight(FontWeight.Bold)Row({space:10}){Label({text:管理员,color:error,showIcon:true,textIcon:})Label({text:编辑,color:primary,showIcon:true,textIcon:✏️})Label({text:作者,color:info,showIcon:true,textIcon:✍️})Label({text:访客,color:secondary})}.flexWrap(FlexWrap.Wrap)}.width(100%).padding(30)}}10. 组合使用示例Entry Component struct LabelCombinationExample{build(){Column({space:30}){// 订单信息卡片Column({space:15}){Text(订单 #12345).fontSize(18).fontWeight(FontWeight.Bold)Row({space:10}){Label({text:已支付,color:success,showIcon:true,textIcon:✓})Label({text:已发货,color:info,showIcon:true,textIcon:})Label({text:电子产品,color:primary})}.flexWrap(FlexWrap.Wrap)}.width(100%).padding(20).backgroundColor(#F9FAFB).borderRadius(8)// 任务信息卡片Column({space:15}){Text(任务完成项目文档).fontSize(18).fontWeight(FontWeight.Bold)Row({space:10}){Label({text:高优先级,color:error,showIcon:true,textIcon:})Label({text:进行中,color:info,showIcon:true,textIcon:})Label({text:开发,color:primary})}.flexWrap(FlexWrap.Wrap)}.width(100%).padding(20).backgroundColor(#F9FAFB).borderRadius(8)}.width(100%).padding(30)}}主题配置Label 的所有样式都通过ComponentTheme配置所有配置都在代码中不依赖JSON文件。修改默认颜色import{ComponentTheme}from../theme/ComponentTheme// 修改主色影响 primary 颜色ComponentTheme.PRIMARY_COLOR#007AFF// 修改错误色影响 error 颜色ComponentTheme.ERROR_COLOR#FF3B30// 修改边框颜色影响 default 颜色的边框ComponentTheme.BORDER_COLOR#E5E5E5// 修改圆角ComponentTheme.BORDER_RADIUS8自定义颜色如果需要自定义颜色可以修改Label.ets中的颜色定义// 在 Label.ets 中修改 getBackgroundColor() 方法privategetBackgroundColor():string{switch(this.color){casesuccess:{return#10B981// 修改成功色}casewarning:{return#F59E0B// 修改警告色}// ... 其他颜色}}最佳实践1. 颜色选择推荐根据语义选择颜色default用于一般信息、中性标签primary用于主要操作、重要信息secondary用于次要信息success用于成功状态、完成状态warning用于警告状态、待处理状态error用于错误状态、失败状态info用于信息提示、进行中状态2. 尺寸选择推荐根据使用场景选择尺寸small用于紧凑空间、列表项、表格中medium默认尺寸适用于大多数场景large用于重要信息、大屏幕显示3. 图标使用语义化图标使用与文字语义相关的图标简洁图标使用简单的文字图标✓、✕、⚠等统一风格保持图标风格统一4. 宽度设置自适应大多数情况下使用自适应宽度不设置labelWidth固定宽度需要对齐时使用固定宽度百分比宽度需要响应式布局时使用百分比宽度5. 组合使用状态组合多个状态标签可以组合使用分类组合多个分类标签可以组合使用信息层次使用不同颜色区分信息层次常见问题Q1: 如何自定义标签颜色A: 修改Label.ets中的getBackgroundColor()和getTextColor()方法或者扩展LabelColor类型// 在 Label.ets 中添加新颜色exporttypeLabelColordefault|primary|custom// 在 getBackgroundColor() 中添加处理casecustom:{return#YOUR_COLOR}Q2: 如何隐藏品牌标识A: 设置showBrand: falseLabel({text:标签,showBrand:false})Q3: 如何设置标签宽度A: 使用labelWidth属性Label({text:标签,labelWidth:200// 固定宽度})Label({text:标签,labelWidth:80%// 百分比宽度})Q4: 图标不显示怎么办A: 确保同时设置showIcon: true和textIcon属性Label({text:标签,showIcon:true,// 必须设置为 truetextIcon:✓// 必须提供图标文本})Q5: 如何实现点击事件A: Label 组件本身不支持点击事件如果需要可点击的标签可以使用Tag组件后续会实现或者在外层包裹ButtonButton(){Label({text:可点击标签,color:primary})}.type(ButtonType.Normal).backgroundColor(transparent).border({width:0})Q6: 如何实现多行标签A: Label 组件是单行显示如果需要多行可以使用多个 Label 组合或者使用Tag组件支持换行。总结Label 是控件库中的基础标签组件具有以下核心特性多种颜色支持 7 种颜色类型满足不同场景需求多种尺寸支持 small、medium、large 三种尺寸图标支持支持显示文字图标增强视觉效果灵活宽度支持固定宽度、百分比宽度、自适应宽度易于使用简单的 API开箱即用主题配置所有样式都可通过代码配置品牌标识自动包含品牌标识保持视觉统一关键要点✅ 使用color属性选择颜色类型✅ 使用labelSize属性选择尺寸✅ 使用showIcon和textIcon显示图标✅ 使用labelWidth设置宽度✅ 根据语义选择合适的颜色✅ 通过ComponentTheme自定义全局样式适用场景状态标识订单状态、任务状态等分类标签商品分类、内容分类等优先级标记任务优先级、重要程度等信息展示简单的信息标签展示下一篇预告Badge徽章标签详解本文档属于《鸿蒙PC UI控件库开发系列文章》第12篇