1# Badge 2 3The **\<Badge>** component is a container that can be attached to another component for tagging. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12This component supports only one child component. 13 14 15## APIs 16 17**API 1**: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) 18 19Creates a badge. 20 21Since API version 9, this API is supported in ArkTS widgets. 22 23**Parameters** 24 25| Name| Type| Mandatory| Default Value| Description| 26| -------- | -------- | -------- | -------- | -------- | 27| count | number | Yes| - | Number of notifications.| 28| position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| 29| maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.| 30| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.| 31 32**API 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) 33 34Creates a badge based on the given string. 35 36Since API version 9, this API is supported in ArkTS widgets. 37 38**Parameters** 39 40| Name| Type| Mandatory| Default Value| Description| 41| -------- | -------- | -------- | -------- | -------- | 42| value | string | Yes| - | Prompt content.| 43| position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| 44| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.| 45 46## BadgePosition 47 48Since API version 9, this API is supported in ArkTS widgets. 49 50| Name| Description| 51| -------- | -------- | 52| RightTop | The badge is displayed in the upper right corner of the parent component.| 53| Right | The badge is vertically centered on the right of the parent component.| 54| Left | The badge is vertically centered on the left of the parent component.| 55 56## BadgeStyle 57 58Since API version 9, this API is supported in ArkTS widgets. 59 60| Name | Type | Mandatory| Default Value | Description | 61| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- | 62| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. | 63| fontSize | number \| string | No | 10 | Font size, in vp. | 64| badgeSize | number \| string | No | 16 | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| 65| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.Red | Badge color. | 66 67## Example 68 69```ts 70// xxx.ets 71@Entry 72@Component 73struct BadgeExample { 74 @Builder TabBuilder(index: number) { 75 Column() { 76 if (index === 2) { 77 Badge({ 78 value: '', 79 style: { badgeSize: 6, badgeColor: '#FA2A2D' } 80 }) { 81 Image('/common/public_icon_off.svg') 82 .width(24) 83 .height(24) 84 } 85 .width(24) 86 .height(24) 87 .margin({ bottom: 4 }) 88 } else { 89 Image('/common/public_icon_off.svg') 90 .width(24) 91 .height(24) 92 .margin({ bottom: 4 }) 93 } 94 Text('Tab') 95 .fontColor('#182431') 96 .fontSize(10) 97 .fontWeight(500) 98 .lineHeight(14) 99 }.width('100%').height('100%').justifyContent(FlexAlign.Center) 100 } 101 102 @Builder itemBuilder(value: string) { 103 Row() { 104 Image('common/public_icon.svg').width(32).height(32).opacity(0.6) 105 Text(value) 106 .width(177) 107 .height(21) 108 .margin({ left: 15, right: 76 }) 109 .textAlign(TextAlign.Start) 110 .fontColor('#182431') 111 .fontWeight(500) 112 .fontSize(16) 113 .opacity(0.9) 114 Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) 115 }.width('100%').padding({ left: 12, right: 12 }).height(56) 116 } 117 118 build() { 119 Column() { 120 Text('dotsBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 121 Tabs() { 122 TabContent() 123 .tabBar(this.TabBuilder(0)) 124 TabContent() 125 .tabBar(this.TabBuilder(1)) 126 TabContent() 127 .tabBar(this.TabBuilder(2)) 128 TabContent() 129 .tabBar(this.TabBuilder(3)) 130 } 131 .width(360) 132 .height(56) 133 .backgroundColor('#F1F3F5') 134 135 Column() { 136 Text('stringBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 137 List({ space: 12 }) { 138 ListItem() { 139 Text('list1').fontSize(14).fontColor('#182431').margin({ left: 12 }) 140 } 141 .width('100%') 142 .height(56) 143 .backgroundColor('#FFFFFF') 144 .borderRadius(24) 145 .align(Alignment.Start) 146 147 ListItem() { 148 Badge({ 149 value: 'New', 150 position: BadgePosition.Right, 151 style: { badgeSize: 16, badgeColor: '#FA2A2D' } 152 }) { 153 Text('list2').width(27).height(19).fontSize(14).fontColor('#182431') 154 }.width(49.5).height(19) 155 .margin({ left: 12 }) 156 } 157 .width('100%') 158 .height(56) 159 .backgroundColor('#FFFFFF') 160 .borderRadius(24) 161 .align(Alignment.Start) 162 }.width(336) 163 164 Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) 165 List() { 166 ListItem() { 167 this.itemBuilder('list1') 168 } 169 170 ListItem() { 171 Row() { 172 Image('common/public_icon.svg').width(32).height(32).opacity(0.6) 173 Badge({ 174 count: 1, 175 position: BadgePosition.Right, 176 style: { badgeSize: 16, badgeColor: '#FA2A2D' } 177 }) { 178 Text('list2') 179 .width(177) 180 .height(21) 181 .textAlign(TextAlign.Start) 182 .fontColor('#182431') 183 .fontWeight(500) 184 .fontSize(16) 185 .opacity(0.9) 186 }.width(240).height(21).margin({ left: 15, right: 11 }) 187 188 Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) 189 }.width('100%').padding({ left: 12, right: 12 }).height(56) 190 } 191 192 ListItem() { 193 this.itemBuilder('list3') 194 } 195 196 ListItem() { 197 this.itemBuilder('list4') 198 } 199 } 200 .width(336) 201 .height(232) 202 .backgroundColor('#FFFFFF') 203 .borderRadius(24) 204 .padding({ top: 4, bottom: 4 }) 205 .divider({ strokeWidth: 0.5, color: 'rgba(0,0,0,0.1)', startMargin: 60, endMargin: 12 }) 206 }.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 12 }) 207 }.width('100%') 208 } 209} 210``` 211 212 213
