IBest-UI

Appearance

Badge 徽标 ​

介绍 ​

在右上角展示徽标数字或小红点。

引入 ​

ts
import { IBestBadge } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder badgeContent() {
    Row()
      .width(40)
      .height(40)
      .borderRadius(5)
      .backgroundColor("#f2f3f5")
  }
  build() {
    Row({space: 20}) {
      IBestBadge({
        content: 0
      }){
        this.badgeContent()
      }
      IBestBadge({
        content: 10
      }){
        this.badgeContent()
      }
      IBestBadge({
        content: "Hot"
      }){
        this.badgeContent()
      }
      IBestBadge({
        content: 66
      }){
        Text("查看信息")
      }
      IBestBadge({
        dot: true
      }){
        Text("查看信息")
      }
    }
  }
}

最大值 ​

最大值

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder badgeContent() {
    Row()
      .width(40)
      .height(40)
      .borderRadius(5)
      .backgroundColor("#f2f3f5")
  }
  build() {
    Row({space: 20}) {
      IBestBadge({
        content: 20,
        max: 9
      }){
        this.badgeContent()
      }
      IBestBadge({
        content: 50,
        max: 20
      }){
        this.badgeContent()
      }
      IBestBadge({
        content: 200,
        max: 99
      }){
        this.badgeContent()
      }
    }
  }
}

自定义颜色 ​

自定义颜色

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder badgeContent() {
    Row()
      .width(40)
      .height(40)
      .borderRadius(5)
      .backgroundColor("#f2f3f5")
  }
  build() {
    Row({space: 20}) {
      IBestBadge({
        content: 5,
        color: '#1989fa'
      }){
        this.badgeContent()
      }
      IBestBadge({
        content: 10,
        color: '#1989fa'
      }){
        this.badgeContent()
      }
      IBestBadge({
        dot: true,
        color: '#1989fa'
      }){
        this.badgeContent()
      }
    }
  }
}

显示图标 ​

显示图标

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder badgeContent() {
    Row()
      .width(40)
      .height(40)
      .borderRadius(5)
      .backgroundColor("#f2f3f5")
  }
  build() {
    Row({space: 20}) {
      IBestBadge({
        icon: "medal",
        iconColor: Color.Red,
        badgePosition: "bottom-right"
      }){
        this.badgeContent()
      }
    }
  }
}

自定义徽标位置 ​

自定义徽标位置

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder badgeContent() {
    Row()
      .width(40)
      .height(40)
      .borderRadius(5)
      .backgroundColor("#f2f3f5")
  }
  build() {
    Row({space: 20}) {
      IBestBadge({
        content: 10,
        badgePosition: "top-left"
      }){
        this.badgeContent()
      }
      IBestBadge({
        content: 10,
        badgePosition: "bottom-left"
      }){
        this.badgeContent()
      }
      IBestBadge({
        content: 10,
        badgePosition: "bottom-right"
      }){
        this.badgeContent()
      }
    }
  }
}

API ​

@Props ​

参数说明类型默认值
content徽标内容string | number''
color徽标背景色ResourceColor#DB3131
dot是否展示为小红点booleanfalse
max最大值,超过最大值会显示 {max}+,仅当 content 为数字时有效number-1
showZero值为0时是否显示徽标booleantrue
badgePosition徽标位置, 可选值 top-left top-right bottom-left bottom-rightstringtop-right
icon 2.1.5徽标图标, 优先级高于 content dotResourceStr''
iconColor 2.1.5徽标图标颜色ResourceColor''
iconSize 2.1.5徽标图标大小string | number12

插槽 ​

插槽名说明类型
defaultBuilder默认内容的插槽CustomBuilder