1# Badge 2 3可以附加在单个组件上用于信息标记的容器组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12支持单个子组件。 13 14> **说明：** 15> 16> 子组件类型：系统组件和自定义组件，支持渲染控制类型（[if/else](../../quick-start/arkts-rendering-control-ifelse.md)、[ForEach](../../quick-start/arkts-rendering-control-foreach.md)和[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)）。 17 18 19## 接口 20 21**方法1：** Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) 22 23创建数字标记组件。 24 25从API version 9开始，该接口支持在ArkTS卡片中使用。 26 27**参数：** 28| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 29| -------- | -------- | -------- | -------- | -------- | 30| count | number | 是 | - | 设置提醒消息数。<br/>**说明：** <br/>小于等于0时不显示信息标记。 | 31| position | [BadgePosition](#badgeposition枚举说明) | 否 | BadgePosition.RightTop | 设置提示点显示位置。<br/>默认值：BadgePosition.RightTop | 32| maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 | 33| style | [BadgeStyle](#badgestyle对象说明) | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | 34 35**方法2：** Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) 36 37根据字符串创建标记组件。 38 39从API version 9开始，该接口支持在ArkTS卡片中使用。 40 41**参数：** 42 43| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 44| -------- | -------- | -------- | -------- | -------- | 45| value | string | 是 | - | 提示内容的文本字符串。 | 46| position | [BadgePosition](#badgeposition枚举说明) | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | 47| style | [BadgeStyle](#badgestyle对象说明) | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | 48 49## BadgePosition枚举说明 50 51从API version 9开始，该接口支持在ArkTS卡片中使用。 52 53| 名称 | 描述 | 54| -------- | -------- | 55| RightTop | 圆点显示在右上角。 | 56| Right | 圆点显示在右侧纵向居中。 | 57| Left | 圆点显示在左侧纵向居中。 | 58 59## BadgeStyle对象说明 60 61从API version 9开始，该接口支持在ArkTS卡片中使用。 62 63| 名称 | 类型 | 必填 | 默认值 | 描述 | 64| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------------------------ | 65| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.White | 文本颜色。<br/>默认值：Color.White | 66| fontSize | number \| string | 否 | 10 | 文本大小。<br/>默认值：10<br/>单位：vp<br/>**说明：** <br/>不支持设置百分比。 | 67| badgeSize | number \| string | 否 | 16 | Badge的大小，单位vp。不支持百分比形式设置。当设置为非法值时，按照默认值处理。<br/>默认值：16<br/>单位：vp<br/>**说明：** <br/>不支持设置百分比。当设置为非法值时，按照默认值处理。 | 68| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.Red | Badge的颜色。<br/>默认值：Color.Red | 69## 属性 70 71支持[通用属性](ts-universal-attributes-size.md)。 72 73## 事件 74 75支持[通用事件](ts-universal-events-click.md)。 76## 示例 77 78```ts 79// xxx.ets 80@Entry 81@Component 82struct BadgeExample { 83 @Builder TabBuilder(index: number) { 84 Column() { 85 if (index === 2) { 86 Badge({ 87 value: '', 88 style: { badgeSize: 6, badgeColor: '#FA2A2D' } 89 }) { 90 Image('/common/public_icon_off.svg') 91 .width(24) 92 .height(24) 93 } 94 .width(24) 95 .height(24) 96 .margin({ bottom: 4 }) 97 } else { 98 Image('/common/public_icon_off.svg') 99 .width(24) 100 .height(24) 101 .margin({ bottom: 4 }) 102 } 103 Text('Tab') 104 .fontColor('#182431') 105 .fontSize(10) 106 .fontWeight(500) 107 .lineHeight(14) 108 }.width('100%').height('100%').justifyContent(FlexAlign.Center) 109 } 110 111 @Builder itemBuilder(value: string) { 112 Row() { 113 Image('common/public_icon.svg').width(32).height(32).opacity(0.6) 114 Text(value) 115 .width(177) 116 .height(21) 117 .margin({ left: 15, right: 76 }) 118 .textAlign(TextAlign.Start) 119 .fontColor('#182431') 120 .fontWeight(500) 121 .fontSize(16) 122 .opacity(0.9) 123 Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) 124 }.width('100%').padding({ left: 12, right: 12 }).height(56) 125 } 126 127 build() { 128 Column() { 129 Text('dotsBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 130 Tabs() { 131 TabContent() 132 .tabBar(this.TabBuilder(0)) 133 TabContent() 134 .tabBar(this.TabBuilder(1)) 135 TabContent() 136 .tabBar(this.TabBuilder(2)) 137 TabContent() 138 .tabBar(this.TabBuilder(3)) 139 } 140 .width(360) 141 .height(56) 142 .backgroundColor('#F1F3F5') 143 144 Column() { 145 Text('stringBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 146 List({ space: 12 }) { 147 ListItem() { 148 Text('list1').fontSize(14).fontColor('#182431').margin({ left: 12 }) 149 } 150 .width('100%') 151 .height(56) 152 .backgroundColor('#FFFFFF') 153 .borderRadius(24) 154 .align(Alignment.Start) 155 156 ListItem() { 157 Badge({ 158 value: 'New', 159 position: BadgePosition.Right, 160 style: { badgeSize: 16, badgeColor: '#FA2A2D' } 161 }) { 162 Text('list2').width(27).height(19).fontSize(14).fontColor('#182431') 163 }.width(49.5).height(19) 164 .margin({ left: 12 }) 165 } 166 .width('100%') 167 .height(56) 168 .backgroundColor('#FFFFFF') 169 .borderRadius(24) 170 .align(Alignment.Start) 171 }.width(336) 172 173 Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 174 List() { 175 ListItem() { 176 this.itemBuilder('list1') 177 } 178 179 ListItem() { 180 Row() { 181 Image('common/public_icon.svg').width(32).height(32).opacity(0.6) 182 Badge({ 183 count: 1, 184 position: BadgePosition.Right, 185 style: { badgeSize: 16, badgeColor: '#FA2A2D' } 186 }) { 187 Text('list2') 188 .width(177) 189 .height(21) 190 .textAlign(TextAlign.Start) 191 .fontColor('#182431') 192 .fontWeight(500) 193 .fontSize(16) 194 .opacity(0.9) 195 }.width(240).height(21).margin({ left: 15, right: 11 }) 196 197 Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) 198 }.width('100%').padding({ left: 12, right: 12 }).height(56) 199 } 200 201 ListItem() { 202 this.itemBuilder('list3') 203 } 204 205 ListItem() { 206 this.itemBuilder('list4') 207 } 208 } 209 .width(336) 210 .height(232) 211 .backgroundColor('#FFFFFF') 212 .borderRadius(24) 213 .padding({ top: 4, bottom: 4 }) 214 .divider({ strokeWidth: 0.5, color: 'rgba(0,0,0,0.1)', startMargin: 60, endMargin: 12 }) 215 }.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 12 }) 216 }.width('100%') 217 } 218} 219``` 220 221 222
