1# Badge 2 3可以附加在单个组件上用于信息标记的容器组件。 4 5> **说明：** 6> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 7 8 9## 子组件 10 11支持单个子组件。 12 13 14## 接口 15 16**方法1：** Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) 17 18创建数字标记组件。 19 20**参数：** 21| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 22| -------- | -------- | -------- | -------- | -------- | 23| count | number | 是 | - | 设置提醒消息数。 | 24| position | [BadgePosition](#badgeposition枚举说明) | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | 25| maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 | 26| style | [BadgeStyle](#badgestyle对象说明) | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | 27 28**方法2：** Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) 29 30根据字符串创建标记组件。 31 32**参数：** 33 34| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 35| -------- | -------- | -------- | -------- | -------- | 36| value | string | 是 | - | 提示内容的文本字符串。 | 37| position | [BadgePosition](#badgeposition枚举说明) | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | 38| style | [BadgeStyle](#badgestyle对象说明) | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | 39 40## BadgePosition枚举说明 41 42| 名称 | 描述 | 43| -------- | -------- | 44| RightTop | 圆点显示在右上角。 | 45| Right | 圆点显示在右侧纵向居中。 | 46| Left | 圆点显示在左侧纵向居中。 | 47 48## BadgeStyle对象说明 49 50| 名称 | 类型 | 必填 | 默认值 | 描述 | 51| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- | 52| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.White | 文本颜色。 | 53| fontSize | number \| string | 否 | 10 | 文本大小，单位vp。 | 54| badgeSize | number \| string | 否 | 16 | Badge的大小，单位vp。不支持百分比形式设置。 | 55| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.Red | Badge的颜色。 | 56 57## 示例 58 59```ts 60// xxx.ets 61@Entry 62@Component 63struct BadgeExample { 64 @State counts: number = 1; 65 @State message: string = 'new'; 66 67 build() { 68 Column() { 69 Text('numberBadge').width('80%') 70 Row({ space: 10 }) { 71 // 数字上标，maxCount默认99,超过99展示99+ 72 Badge({ 73 count: this.counts, 74 maxCount: 99, 75 position: BadgePosition.RightTop, 76 style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } 77 }) { 78 Button('message') 79 .onClick(() => { 80 this.counts++; 81 }) 82 .width(100).height(50).backgroundColor(0x317aff) 83 }.width(100).height(50) 84 85 // 数字左标 86 Badge({ 87 count: this.counts, 88 maxCount: 99, 89 position: BadgePosition.Left, 90 style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } 91 }) { 92 Button('message') 93 .onClick(() => { 94 this.counts++; 95 }) 96 .width(100).height(50).backgroundColor(0x317aff) 97 }.width(100).height(50) 98 99 100 // 数字右标 101 Badge({ 102 count: this.counts, 103 maxCount: 99, 104 position: BadgePosition.Right, 105 style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } 106 }) { 107 Button('message') 108 .onClick(() => { 109 this.counts++; 110 }) 111 .width(100).height(50).backgroundColor(0x317aff) 112 }.width(100).height(50) 113 }.margin(10) 114 115 Text('stringBadge').width('80%') 116 Row({ space: 30 }) { 117 Badge({ 118 value: this.message, 119 style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } 120 }) { 121 Text('message') 122 .width(80) 123 .height(50) 124 .fontSize(16) 125 .lineHeight(37) 126 .borderRadius(10) 127 .textAlign(TextAlign.Center) 128 .backgroundColor(0xF3F4ED) 129 }.width(80).height(50) 130 131 // value为空，设置圆点标记 132 Badge({ 133 value: '', 134 position: BadgePosition.Right, 135 style: { badgeSize: 6, badgeColor: Color.Red } 136 }) { 137 Text('message') 138 .width(90) 139 .height(50) 140 .fontSize(16) 141 .lineHeight(37) 142 .borderRadius(10) 143 .textAlign(TextAlign.Center) 144 .backgroundColor(0xF3F4ED) 145 }.width(90).height(50) 146 }.margin(10) 147 } 148 } 149} 150``` 151 152 153
