ts-container-badge.md 3.6 KB
Newer Older
Z
zengyawen 已提交
1
# Badge
Z
zengyawen 已提交
2

E
ester.zhou 已提交
3
The **\<Badge>** component is a container that can be attached to another component for tagging.
Z
zengyawen 已提交
4

E
ester.zhou 已提交
5
>  **NOTE**
E
ester.zhou 已提交
6
>
E
ester.zhou 已提交
7
>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Z
zengyawen 已提交
8 9


Z
zengyawen 已提交
10
## Required Permissions
Z
zengyawen 已提交
11

Z
zengyawen 已提交
12
None
Z
zengyawen 已提交
13 14


Z
zengyawen 已提交
15
## Child Components
Z
zengyawen 已提交
16

Z
zengyawen 已提交
17
This component supports only one child component.
Z
zengyawen 已提交
18 19


Z
zengyawen 已提交
20
## APIs
Z
zengyawen 已提交
21

E
ester.zhou 已提交
22
Method 1: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle})
Z
zengyawen 已提交
23

E
ester.zhou 已提交
24
Create a badge.
Z
zengyawen 已提交
25

E
ester.zhou 已提交
26 27 28 29 30 31 32
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| count | number | Yes| - | Number of notifications.|
| position | BadgePosition | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
| maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.|
| style | BadgeStyle | Yes| - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size.|
Z
zengyawen 已提交
33

E
ester.zhou 已提交
34 35 36
Method 2: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})

Creates a badge based on the given string.
Z
zengyawen 已提交
37

Z
zengyawen 已提交
38
- Parameters
E
ester.zhou 已提交
39
  | Name| Type| Mandatory| Default Value| Description|
Z
zengyawen 已提交
40
  | -------- | -------- | -------- | -------- | -------- |
E
ester.zhou 已提交
41 42 43
  | value | string | Yes| - | Prompt content.|
  | position | BadgePosition | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
  | style | BadgeStyle | Yes| - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size.|
Z
zengyawen 已提交
44

E
ester.zhou 已提交
45
- BadgeStyle
E
ester.zhou 已提交
46
  | Name| Type| Mandatory| Default Value| Description|
Z
zengyawen 已提交
47
  | -------- | -------- | -------- | -------- | -------- |
E
ester.zhou 已提交
48 49 50 51
  | color | [ResourceColor](ts-types.md#resourcecolor) | No| Color.White | Text color.|
  | fontSize | number \| string | No| 10 | Text size.|
  | badgeSize | number \| string | Yes| - | Badge size.|
  | badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color.Red | Badge color.|
Z
zengyawen 已提交
52

Z
zengyawen 已提交
53
- BadgePosition enums
E
ester.zhou 已提交
54
  | Name| Description|
Z
zengyawen 已提交
55
  | -------- | -------- |
E
ester.zhou 已提交
56 57 58
  | RightTop | The badge is displayed in the upper right corner of the parent component.|
  | Right | The badge is vertically centered on the right of the parent component.|
  | Left | The badge is vertically centered on the left of the parent component.|
Z
zengyawen 已提交
59 60


Z
zengyawen 已提交
61
## Example
Z
zengyawen 已提交
62

E
ester.zhou 已提交
63 64
```ts
// xxx.ets
Z
zengyawen 已提交
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
@Entry
@Component
struct BadgeExample {
  @State counts: number = 1
  @State message: string = 'new'

  build() {
    Flex({ justifyContent: FlexAlign.SpaceAround }) {
      Badge({
        count: this.counts,
        maxCount: 99,
        style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
      }) {
        Button('message')
          .onClick(() => {
            this.counts++
          })
          .width(100).height(50).backgroundColor(0x317aff)
      }.width(100).height(50)

      Badge({
        value: this.message,
        style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue }
      }) {
        Text('message')
          .width(80).height(50).fontSize(16).lineHeight(37)
          .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED)
      }.width(80).height(50)

      Badge({
E
ester.zhou 已提交
95
        value: ' ',
E
ester.zhou 已提交
96
        position: BadgePosition.Right,
Z
zengyawen 已提交
97 98 99 100 101 102 103 104 105 106 107
        style: { badgeSize: 6, badgeColor: Color.Red }
      }) {
        Text('message')
          .width(90).height(50).fontSize(16).lineHeight(37)
          .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED)
      }.width(90).height(50)
    }.width('100%').margin({ top: 5 })
  }
}
```

Z
zengyawen 已提交
108
![en-us_image_0000001212218470](figures/en-us_image_0000001212218470.gif)