• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# badge
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @liyujie43-->
5<!--Designer: @weixin_52725220-->
6<!--Tester: @xiong0104-->
7<!--Adviser: @HelloCrease-->
8
9应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。
10
11>  **说明：**
12>
13> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
14
15
16## 子组件
17
18仅支持单个子组件。
19
20
21## 属性
22
23除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
24
25| 名称 | 类型 | 默认值 | 必填 | 描述 |
26| -------- | -------- | -------- | -------- | -------- |
27| placement | string | rightTop | 否 | 事件提醒的数字标记或者圆点标记的位置，可选值为：<br/>-&nbsp;right：位于组件右边框。<br/>-&nbsp;rightTop：位于组件边框右上角。<br/>-&nbsp;left：位于组件左边框。 |
28| count | number | 0 | 否 | 设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。<br/>说明：当数字设置为大于maxcount时，将使用maxcount显示。count属性最大支持整数值为2147483647。 |
29| visible | boolean | false | 否 | 是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。 |
30| maxcount | number | 99 | 否 | 最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。<br/>说明：maxcount属性最大支持整数值为2147483647。 |
31| config | BadgeConfig | - | 否 | 设置新事件标记相关配置属性。 |
32| label | string | - | 否 | 设置新事件提醒的文本值。<br/>说明：使用该属性时，count和maxcount属性不生效。 |
33
34### BadgeConfig
35
36| 名称 | 类型 | 默认值 | 必填 | 描述 |
37| -------- | -------- | -------- | -------- | -------- |
38| badgeColor | &lt;color&gt; | 	#fa2a2d | 否 | 新事件标记背景色。 |
39| textColor | &lt;color&gt; | #ffffff | 否 | 数字标记的数字文本颜色。 |
40| textSize | &lt;length&gt; | 10px | 否 | 数字标记的数字文本大小。 |
41| badgeSize | &lt;length&gt; | 6px | 否 | 圆点标记的大小。 |
42
43
44## 样式
45
46支持[通用样式](js-service-widget-common-styles.md)。
47
48
49## 事件
50
51支持[通用事件](js-service-widget-common-events.md)。
52
53
54## 示例
55
56   ```html
57<!-- xxx.hml -->
58<div class="container">
59    <badge class="badge" config="{{ badgeConfig }}" visible="true" count="100" maxcount="99">
60        <text class="text1">example</text>
61    </badge>
62    <badge class="badge" visible="true" count="1">
63        <text class="text2">example</text>
64    </badge>
65</div>
66   ```
67
68   ```css
69/* xxx.css */
70.container {
71    flex-direction: column;
72    width: 100%;
73    align-items: center;
74}
75
76.badge {
77    width: 160px;
78    height: 60px;
79    margin-top: 30px;
80}
81
82.text1 {
83    background-color: #f9a01e;
84    font-size: 19fp;
85}
86
87.text2 {
88    background-color: #46b1e3;
89    font-size: 19fp;
90}
91   ```
92
93   ```js
94// xxx.js
95export default {
96    data: {
97        badgeConfig: {
98            badgeColor: "#0a59f7",
99            textColor: "#ffffff",
100        }
101    }
102}
103   ```
104
105![badgeSample](figures/badgeSample.png)