Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
59c108c4
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
59c108c4
编写于
9月 01, 2022
作者:
O
openharmony_ci
提交者:
Gitee
9月 01, 2022
浏览文件
操作
浏览文件
下载
差异文件
!8870 翻译完成 8562:ts-container-badge.md
Merge pull request !8870 from ester.zhou/TR-8562
上级
8c77bd59
0ca468a5
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
20 addition
and
19 deletion
+20
-19
en/application-dev/reference/arkui-ts/ts-container-badge.md
en/application-dev/reference/arkui-ts/ts-container-badge.md
+20
-19
未找到文件。
en/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @
59c108c4
# 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
**<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
## 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
**
<Badge>
**
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
**
<Badge>
**
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
**
<Badge>
**
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录