• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# badge
2
3
4The **\<badge>** component is used to mark new events that require user attention in your application.
5
6>  **NOTE**
7>
8> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
9
10
11## Child Components
12
13This component supports only one child component.
14
15
16## attributes
17
18In addition to the [universal attributes](js-service-widget-common-attributes.md), the following attributes are supported.
19
20| Name| Type| Default Value| Mandatory| Description|
21| -------- | -------- | -------- | -------- | -------- |
22| placement | string | rightTop | No| Position of a number or dot badge. Available values are as follows:<br>**right**: on the right border of the component.<br>- **rightTop**: in the upper right corner of the component border.<br>- **left**: on the left border of the component.|
23| count | number | 0 | No| Number of notifications displayed via the badge. The default value is **0**. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.<br>When the **count** value is greater than the **maxcount** value, *maxcount***+** is displayed. The largest integer value supported for **count** is **2147483647**.|
24| visible | boolean | false | No| Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, set the **count** attribute.|
25| maxcount | number | 99 | No| Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.<br>Note: The maximum integer value is 2147483647.|
26| config | BadgeConfig | - | No| Configuration of the badge.|
27| label | string | - | No| Text of the new notification displayed via the badge.<br>When this attribute is set, attributes **count** and **maxcount** do not take effect.|
28
29### BadgeConfig
30
31| Name| Type| Default Value| Mandatory| Description|
32| -------- | -------- | -------- | -------- | -------- |
33| badgeColor | &lt;color&gt; | 	#fa2a2d | No| Background color of the badge.|
34| textColor | &lt;color&gt; | #ffffff | No| Text color of the number badge.|
35| textSize | &lt;length&gt; | 10px | No| Text size of the number badge.|
36| badgeSize | &lt;length&gt; | 6px | No| Size of the dot badge.|
37
38
39## Styles
40
41The [universal styles](js-service-widget-common-styles.md) are supported.
42
43
44## Events
45
46The [universal events](js-service-widget-common-events.md) are supported.
47
48
49## Example
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)
102