Badge

About 9 min

Badge

新事件标记组件,在组件上提供事件信息展示能力。

子组件

支持单个子组件。

接口

Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})

  • 参数

    参数名

    参数类型

    必填

    默认值

    参数描述

    count

    number

    -

    设置提醒消息数。

    position

    BadgePosition

    RightTop

    设置提示点显示位置。

    maxCount

    number

    99

    最大消息数,超过最大消息时仅显示maxCount+。

    style

    BadgeStyle

    -

    Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。

Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})

根据字符串创建提醒组件。

  • 参数

    参数名

    参数类型

    必填

    默认值

    参数描述

    value

    string

    -

    提示内容的文本字符串。

    position

    BadgePosition

    RightTop

    设置提示点显示位置。

    style

    BadgeStyle

    -

    Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。

  • BadgeStyle对象说明

    名称

    类型

    必填

    默认值

    描述

    color

    Color

    White

    文本颜色。

    fontSize

    number | string

    10

    文本大小。

    badgeSize

    number | string

    -

    badge的大小。

    badgeColor

    Color

    Red

    badge的颜色。

  • BadgePosition枚举说明

    名称

    描述

    Right

    圆点显示在右侧纵向居中。

    RightTop

    圆点显示在右上角。

    Left

    圆点显示在左侧纵向居中。

示例

@Entry
@Component
struct BadgeExample {
  @State counts: number = 1
  @State message: string = 'new'

  build() {
    Flex({ justifyContent: FlexAlign.SpaceAround }) {
      Badge({
        count: this.counts,
        maxCount: 99,
        style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
      }) {
        Button('message')
          .onClick(() => {
            this.counts++
          })
          .width(100).height(50).backgroundColor(0x317aff)
      }.width(100).height(50)

      Badge({
        value: this.message,
        style: { 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)

      Badge({
        value: '',
        position: 1,
        style: { badgeSize: 6, badgeColor: Color.Red }
      }) {
        Text('message')
          .width(90).height(50).fontSize(16).lineHeight(37)
          .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED)
      }.width(90).height(50)
    }.width('100%').margin({ top: 5 })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41