badge

The <badge> component is used to mark new events that require user attention in your application.

Required Permissions

None

Child Components

This component supports only one child component.

NOTE: If multiple child components are used, only the first one takes effect by default.

Attributes

In addition to the attributes in Universal Attributes, the following attributes are supported.

Name

Type

Default Value

Mandatory

Description

placement

string

rightTop

No

Position of a number or dot badge. Available values are as follows:

  • right: on the right border of the component.
  • rightTop: in the upper right corner of the component border.
  • left: on the left border of the component.

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.

NOTE:

When the count value is greater than the maxcount value, maxcount+ is displayed.

The largest integer value supported for count is 2147483647.

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.

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+.

NOTE:

The largest integer value supported for maxcount is 2147483647.

config

BadgeConfig

-

No

Configuration of the badge.

label6+

string

-

No

Text of the new notification displayed via the badge.

NOTE:

When this attribute is set, attributes count and maxcount do not take effect.

Table 1 BadgeConfig

Name

Type

Default Value

Mandatory

Description

badgeColor

<color>

#fa2a2d

No

Background color of the badge

textColor

<color>

#ffffff

No

Text color of the number badge

textSize

<length>

10px

No

Text size of the number badge

badgeSize

<length>

6px

No

Default size of the dot badge

Styles

Styles in Universal Styles are supported.

NOTE: The total size of child components must be smaller than or equal to that of the <badge> component. Otherwise, the child components cannot be displayed.

Events

Events in Universal Events are supported.

Methods

Methods in Universal Methods are supported.

Example

<!-- xxx.hml -->
<div class="container">
  <badge class="badge" config="{{badgeconfig}}" visible="true" count="100" maxcount="99">
    <text class="text1">example</text>
  </badge>
  <badge class="badge" visible="true" count="0">
    <text class="text2">example</text>
  </badge>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  width: 100%;
  align-items: center;
}
.badge {
  width: 50%;
  margin-top: 100px;
}
.text1 {
  background-color: #f9a01e;
  font-size: 50px;
}
.text2 {
  background-color: #46b1e3;
  font-size: 50px;
}

// xxx.js
export default {
  data:{
    badgeconfig:{
      badgeColor:"#0a59f7",
      textColor:"#ffffff",
    }
  }
}