ts-container-badge.md 3.3 KB
Newer Older
Z
zengyawen 已提交
1 2
# Badge

T
explain  
tianyu 已提交
3 4
可以附加在单个组件上用于信息标记的容器组件。

H
geshi  
HelloCrease 已提交
5
>  **说明:**
Z
zengyawen 已提交
6
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Z
zengyawen 已提交
7

Z
zengyawen 已提交
8

Z
zengyawen 已提交
9
## 权限列表
Z
zengyawen 已提交
10 11 12



Z
zengyawen 已提交
13

Z
zengyawen 已提交
14
## 子组件
Z
zengyawen 已提交
15

Z
zengyawen 已提交
16
支持单个子组件。
Z
zengyawen 已提交
17 18


Z
zengyawen 已提交
19
## 接口
Z
zengyawen 已提交
20

Z
zengyawen 已提交
21
Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})
Z
zengyawen 已提交
22

Z
zengyawen 已提交
23 24 25 26 27 28 29
- 参数
  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
  | -------- | -------- | -------- | -------- | -------- |
  | count | number | 是 | - | 设置提醒消息数。 |
  | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
  | maxCount | number | 否 | 99 | 最大消息数,超过最大消息时仅显示maxCount+。 |
  | style | BadgeStyle | 否 | - | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
Z
zengyawen 已提交
30

Z
zengyawen 已提交
31
Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
Z
zengyawen 已提交
32 33 34

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

Z
zengyawen 已提交
35 36 37 38 39 40
- 参数
  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
  | -------- | -------- | -------- | -------- | -------- |
  | value | string | 是 | - | 提示内容的文本字符串。 |
  | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
  | style | BadgeStyle | 否 | - | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
Z
zengyawen 已提交
41

Z
zengyawen 已提交
42 43 44 45 46 47 48
- BadgeStyle对象说明
  | 名称 | 类型 | 必填 | 默认值 | 描述 |
  | -------- | -------- | -------- | -------- | -------- |
  | color | Color | 否 | Color.White | 文本颜色。 |
  | fontSize | number \| string | 否 | 10 | 文本大小。 |
  | badgeSize | number \| string | 是 | - | badge的大小。 |
  | badgeColor | Color | 否 | Color.Red | badge的颜色。 |
Z
zengyawen 已提交
49

Z
zengyawen 已提交
50
- BadgePosition枚举说明
T
explain  
tianyu 已提交
51
  | 名称 | 描述 |
Z
zengyawen 已提交
52
  | -------- | -------- |
T
explain  
tianyu 已提交
53 54 55
  | Right | 圆点显示在右侧纵向居中。 |
  | RightTop | 圆点显示在右上角。 |
  | Left | 圆点显示在左侧纵向居中。 |
Z
zengyawen 已提交
56 57


Z
zengyawen 已提交
58
## 示例
Z
zengyawen 已提交
59

H
geshi  
HelloCrease 已提交
60 61
```ts
// xxx.ets
Z
zengyawen 已提交
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
@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({
RsShare's avatar
RsShare 已提交
92
        value: ' ',
Z
zengyawen 已提交
93 94 95 96 97 98 99 100 101 102 103 104
        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 })
  }
}
```

Z
zengyawen 已提交
105
![zh-cn_image_0000001219864147](figures/zh-cn_image_0000001219864147.gif)