diff --git a/en/application-dev/reference/arkui-ts/ts-container-badge.md b/en/application-dev/reference/arkui-ts/ts-container-badge.md index 7a7f107368fb04481a40f911ce8ca0a20d12efd5..6af437dfacc8a7fb3771aacb9c745eef0e2beb91 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md @@ -1,11 +1,11 @@ # Badge -> **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - +The **\** component is a container that can be attached to another component for tagging. -The **<Badge>** component presents event information on a component. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -28,39 +28,40 @@ Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style? | count | number | Yes | - | Number of prompt messages. | | position | BadgePosition | No | BadgePosition.RightTop | Position to display the badge relative to the parent component. | | maxCount | number | No | 99 | Maximum number of prompt messages. When the maximum number is reached, only **maxCount+** is displayed. | - | style | BadgeStyle | No | - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size. | + | style | BadgeStyle | No | - | Style of the **\** component, including the text color, text size, badge color, and badge size. | Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle}) -Creates a **<Badge>** component based on the string. +Creates a **\** component based on the string. - Parameters | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | | value | string | Yes | - | String of the content to prompt. | | position | BadgePosition | No | BadgePosition.RightTop | Display position of the badge. | - | style | BadgeStyle | No | - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size. | + | style | BadgeStyle | No | - | Style of the **\** component, including the text color, text size, badge color, and badge size. | -- BadgeStyle object - | Name | Type | Mandatory | Default Value | Description | +- BadgeStyle + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | color | Color | No | Color.White | Text color. | - | fontSize | number \| string | No | 10 | Text size. | - | badgeSize | number \| string | Yes | - | Size of the badge. | - | badgeColor | Color | No | Color.Red | Color of the badge. | + | color | [ResourceColor](../../ui/ts-types.md) | No | Color.White | Text color. | + | fontSize | number \| string | No | 10 | Text size. | + | badgeSize | number \| string | Yes | - | Size of the badge. | + | badgeColor | [ResourceColor](../../ui/ts-types.md) | No | Color.Red | Color of the badge. | - BadgePosition enums - | Name | Description | + | Name | Description | | -------- | -------- | - | Right | The badge is vertically centered on the right of the parent component. | - | RightTop | The badge is displayed in the upper right corner of the parent component. | - | Left | The badge is vertically centered on the left of the parent component. | + | Right | The badge is vertically centered on the right of the parent component. | + | RightTop | The badge is displayed in the upper right corner of the parent component. | + | Left | The badge is vertically centered on the left of the parent component. | ## Example -``` +```ts +// xxx.ets @Entry @Component struct BadgeExample { @@ -91,7 +92,7 @@ struct BadgeExample { }.width(80).height(50) Badge({ - value: '', + value: ' ', position: 1, style: { badgeSize: 6, badgeColor: Color.Red } }) {