Badge
Note:
Currently in the beta phase.
An information marker component that can be attached to a single component as a container for information alerts.
Import Module
import kit.ArkUI.*
Child Components
Supports a single child component.
Note:
Child component types: System components and custom components, including rendering control types (if/else, ForEach, LazyForEach).
Creating the Component
init(Int32, ?BadgeStyle, ?BadgePosition, ?Int32, () -> Unit)
public init(count!: Int32, style!: ?BadgeStyle, position!: ?BadgePosition = None,
maxCount!: ?Int32 = None, child!: () -> Unit)
Function: Creates a badge component based on a numeric value.
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
Parameters:
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| count | Int32 | Yes | - | Named parameter. Sets the number of alert messages. Does not display the badge if the value is less than or equal to 0. |
| style | ?BadgeStyle | Yes | - | Named parameter. The style settings for the Badge component, including text color, size, dot color, and size. |
| position | ?BadgePosition | No | None | Named parameter. The display position of the badge. Initial value: BadgePosition.RightTop |
| maxCount | ?Int32 | No | None | Named parameter. The maximum number of messages. If exceeded, displays as maxCount+. Initial value: 99 |
| child | () -> Unit | Yes | - | Named parameter. The child component of the container. |
init(String, ?BadgeStyle, ?BadgePosition, () -> Unit)
public init(value!: String, style!: ?BadgeStyle, position!: ?BadgePosition = None, child!: () -> Unit)
Function: Creates a badge component based on a string.
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
Parameters:
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| value | String | Yes | - | Named parameter. The text parameter for the badge component. |
| style | ?BadgeStyle | Yes | - | Named parameter. The style settings for the Badge component, including text color, size, dot color, and size. |
| position | ?BadgePosition | No | None | Named parameter. The display position of the badge. Initial value: BadgePosition.RightTop |
| child | () -> Unit | Yes | - | Named parameter. The child component of the container. |
Common Attributes/Events
Common Attributes: All supported.
Common Events: All supported.
Basic Type Definitions
class BadgeStyle
public class BadgeStyle {
public var color: ?ResourceColor
public var fontSize: ?Length
public var badgeSize: ?Length
public var badgeColor: ?ResourceColor
public var borderColor: ?ResourceColor
public var borderWidth: ?Length
public var fontWeight: ?FontWeight
public init(color!: ?ResourceColor = None, fontSize!: ?Length = None, badgeSize!: ?Length = None,
badgeColor!: ?ResourceColor = None, borderColor!: ?ResourceColor = None,
borderWidth!: ?Length = None, fontWeight!: ?FontWeight = None)
}
Function: Contains style parameters for the Badge component.
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
var color
public var color: ?ResourceColor
Function: The text color.
Type: ?ResourceColor
Read/Write: Readable and Writable
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
var fontSize
public var fontSize: ?Length
Function: The text size, in fp units.
Type: ?Length
Read/Write: Readable and Writable
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
var badgeSize
public var badgeSize: ?Length
Function: The size of the badge, in vp units.
Type: ?Length
Read/Write: Readable and Writable
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
var badgeColor
public var badgeColor: ?ResourceColor
Function: The color of the badge.
Type: ?ResourceColor
Read/Write: Readable and Writable
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
var borderColor
public var borderColor: ?ResourceColor
Function: The border color of the base plate.
Type: ?ResourceColor
Read/Write: Readable and Writable
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
var borderWidth
public var borderWidth: ?Length
Function: The border width of the base plate.
Type: ?Length
Read/Write: Readable and Writable
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
var fontWeight
public var fontWeight: ?FontWeight
Function: Sets the font weight of the text.
Type: ?FontWeight
Read/Write: Readable and Writable
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
init(?ResourceColor, ?Length, ?Length, ?ResourceColor, ?ResourceColor, ?Length, ?FontWeight)
public init(color!: ?ResourceColor = None, fontSize!: ?Length = None, badgeSize!: ?Length = None,
badgeColor!: ?ResourceColor = None, borderColor!: ?ResourceColor = None,
borderWidth!: ?Length = None, fontWeight!: ?FontWeight = None)
Function: Creates a BadgeStyle object.
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
Parameters:
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| color | ?ResourceColor | No | None | Named parameter. The text color. Initial value: Color.White |
| fontSize | ?Length | No | None | Named parameter. The text size. Initial value: 10.fp |
| badgeSize | ?Length | No | None | Named parameter. The size of the badge. Initial value: 16.vp |
| badgeColor | ?ResourceColor | No | None | Named parameter. The color of the badge. Initial value: Color.Red |
| borderColor | ?ResourceColor | No | None | Named parameter. The border color of the base plate. Initial value: Color.Red |
| borderWidth | ?Length | No | None | Named parameter. The border width of the base plate. Initial value: 1.vp |
| fontWeight | ?FontWeight | No | None | Named parameter. Sets the font weight of the text. Initial value: FontWeight.Normal |
enum BadgePosition
public enum BadgePosition <: Equatable<BadgePosition> {
| RightTop
| Right
| Left
| ...
}
Function: Defines the position attributes of the badge.
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
Parent Type:
- Equatable<BadgePosition>
Left
Left
Function: The badge is displayed vertically centered on the left side of the parent component.
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
Right
Right
Function: The badge is displayed vertically centered on the right side of the parent component.
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
RightTop
RightTop
Function: The badge is displayed in the top-right corner of the parent component.
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
operator func !=(BadgePosition)
public operator func !=(other: BadgePosition): Bool
Function: Compares whether two enum values are not equal.
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
Parameters:
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| other | BadgePosition | Yes | - | The other enum value to compare. |
Return Value:
| Type | Description |
|---|---|
| Bool | Returns true if the two enum values are not equal, otherwise returns false. |
operator func ==(BadgePosition)
public operator func ==(other: BadgePosition): Bool
Function: Compares whether two enum values are equal.
System Capability: SystemCapability.ArkUI.ArkUI.Full
Since: 22
Parameters:
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| other | BadgePosition | Yes | - | The other enum value to compare. |
Return Value:
| Type | Description |
|---|---|
| Bool | Returns true if the two enum values are equal, otherwise returns false. |
Example Code
Example 1 (Setting Badge Content)
This example demonstrates different badge effects when passing empty values, strings, or numbers using the value and count properties.
package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*
@Entry
@Component
class EntryView {
func build() {
Column() {
Text("numberBadge").width(80.percent)
Row(space: 10) {
// Numeric superscript, maxCount defaults to 99, displays as 99+ if exceeded
Badge(
count: 1,
style: BadgeStyle(color: Color(0xFFFFFF), fontSize: 16, badgeSize: 20, badgeColor: Color.Red,
fontWeight: FontWeight.Bolder, borderColor: Color.Black, borderWidth: 2.vp),
position: BadgePosition.RightTop,
maxCount: 99
) {
Button("message").width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
Badge(
count: 1,
style: BadgeStyle(color: Color(0xFFFFFF), fontSize: 16, badgeSize: 20, badgeColor: Color.Red,
fontWeight: FontWeight.Bolder, borderColor: Color.Green, borderWidth: 2.vp),
position: BadgePosition.Left,
maxCount: 99
) {
Button("message").width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
// Numeric superscript
Badge(
count: 1,
style: BadgeStyle(color: Color(0xFFFFFF), fontSize: 16, badgeSize: 20, badgeColor: Color.Red,
fontWeight: FontWeight.Regular, borderColor: Color.Gray, borderWidth: 4.vp),
position: BadgePosition.Right,
maxCount: 99
) {
Button("message").width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
}.margin(10)
Text("stringBadge").width(80.percent)
Row(space: 30) {
Badge(
value: "new",
style: BadgeStyle(color: Color(0xFFFFFF), fontSize: 9, badgeSize: 20, badgeColor: Color.Blue)
) {
Text("message")
.width(80)
.height(50)
.fontSize(16)
.lineHeight(37)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xF3F4ED)
}.width(80).height(50)
// Empty value, sets a dot marker
Badge(
value: "",
style: BadgeStyle(badgeSize: 6, badgeColor: Color.Blue),
position: BadgePosition.Right
) {
Text("message")
.width(90)
.height(50)
.fontSize(16)
.lineHeight(37)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xF3F4ED)
}.width(90).height(50)
}.margin(10)
}
}
}
### Example 2 (Controlling Badge Visibility with Numeric Values)
This example demonstrates how to toggle the visibility of badge components by setting the count property to 0 or 1.
package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*
@Entry
@Component
class EntryView {
@State var badgeCount: Int32 = 1
func build() {
Column() {
Badge(
count: this.badgeCount,
style: BadgeStyle(color: Color(0xFFFFFF), fontSize: 16, badgeSize: 20, badgeColor: Color.Red,fontWeight: FontWeight.Bolder, borderColor: Color.Black, borderWidth: 2.vp),
position: BadgePosition.RightTop,
){
Text("message")
.width(200)
.height(50)
.backgroundColor(0x317aff)
.textAlign(TextAlign.Center)
}
.width(200)
.height(50)
Button("count 0")
.onClick({ evt => this.badgeCount =0;})
.margin(top:20)
.width(200)
Button("count 1")
.onClick({ evt => this.badgeCount =1;})
.margin(top:20)
.width(200)
}.margin(10)
}
}
