未验证 提交 59c108c4 编写于 作者: O openharmony_ci 提交者: Gitee

!8870 翻译完成 8562:ts-container-badge.md

Merge pull request !8870 from ester.zhou/TR-8562
# Badge # Badge
> **NOTE**<br> The **\<Badge>** component is a container that can be attached to another component for tagging.
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Badge&gt;** 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 ## Required Permissions
...@@ -28,39 +28,40 @@ Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style? ...@@ -28,39 +28,40 @@ Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?
| count | number | Yes | - | Number of prompt messages. | | count | number | Yes | - | Number of prompt messages. |
| position | BadgePosition | No | BadgePosition.RightTop | Position to display the badge relative to the parent component. | | 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. | | 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 **&lt;Badge&gt;** component, including the text color, text size, badge color, and badge size. | | style | BadgeStyle | No | - | Style of the **\<Badge>** component, including the text color, text size, badge color, and badge size. |
Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle}) Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
Creates a **&lt;Badge&gt;** component based on the string. Creates a **\<Badge>** component based on the string.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| value | string | Yes | - | String of the content to prompt. | | value | string | Yes | - | String of the content to prompt. |
| position | BadgePosition | No | BadgePosition.RightTop | Display position of the badge. | | position | BadgePosition | No | BadgePosition.RightTop | Display position of the badge. |
| style | BadgeStyle | No | - | Style of the **&lt;Badge&gt;** component, including the text color, text size, badge color, and badge size. | | style | BadgeStyle | No | - | Style of the **\<Badge>** component, including the text color, text size, badge color, and badge size. |
- BadgeStyle object - BadgeStyle
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| color | Color | No | Color.White | Text color. | | color | [ResourceColor](../../ui/ts-types.md) | No | Color.White | Text color. |
| fontSize | number \| string | No | 10 | Text size. | | fontSize | number \| string | No | 10 | Text size. |
| badgeSize | number \| string | Yes | - | Size of the badge. | | badgeSize | number \| string | Yes | - | Size of the badge. |
| badgeColor | Color | No | Color.Red | Color of the badge. | | badgeColor | [ResourceColor](../../ui/ts-types.md) | No | Color.Red | Color of the badge. |
- BadgePosition enums - BadgePosition enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Right | The badge is vertically centered on the right 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. | | 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. | | Left | The badge is vertically centered on the left of the parent component. |
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BadgeExample { struct BadgeExample {
...@@ -91,7 +92,7 @@ struct BadgeExample { ...@@ -91,7 +92,7 @@ struct BadgeExample {
}.width(80).height(50) }.width(80).height(50)
Badge({ Badge({
value: '', value: ' ',
position: 1, position: 1,
style: { badgeSize: 6, badgeColor: Color.Red } style: { badgeSize: 6, badgeColor: Color.Red }
}) { }) {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册