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