IBest-UI

Appearance

Avatar 头像 ​

介绍 ​

用于展示用户头像。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State avatar: string = "https://img1.baidu.com/it/u=700838104,4078529388&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
  build() {
    Column() {
      IBestAvatar({
        src: this.avatar,
        onAvatarClick: () => {
          IBestToast.show('点击了头像')
        }
      })
    }
  }
}

头像形状 ​

头像形状

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State avatar: string = "https://img1.baidu.com/it/u=700838104,4078529388&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
  build() {
    Row({space: 20}) {
      IBestAvatar({
        src: this.avatar,
        shape: 'circle'
      })
      IBestAvatar({
        src: this.avatar,
        shape: 'square'
      })
    }
  }
}

头像尺寸 ​

头像尺寸

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State avatar: string = "https://img1.baidu.com/it/u=700838104,4078529388&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
  build() {
    Row({space: 20}) {
      IBestAvatar({
        src: this.avatar,
        avatarSize: 30
      })
      IBestAvatar({
        src: this.avatar,
        avatarSize: 40
      })
      IBestAvatar({
        src: this.avatar,
        avatarSize: 50
      })
    }
  }
}

图标头像 ​

图标头像

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({space: 20}) {
      IBestAvatar({
        icon: 'bill'
      })
      IBestAvatar({
        icon: 'star'
      })
    }
  }
}

文字头像 ​

文字头像

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({space: 20}) {
      IBestAvatar({
        text: "Z",
        randomBgColor: true
      })
      IBestAvatar({
        text: "张",
        randomBgColor: true
      })
      IBestAvatar({
        text: "郭",
        randomBgColor: true
      })
      IBestAvatar({
        text: "柴",
        randomBgColor: true
      })
    }
  }
}

显示徽标 ​

显示徽标

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State avatar: string = "https://img1.baidu.com/it/u=700838104,4078529388&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
  build() {
    Row({space: 20}) {
      IBestAvatar({
        src: this.avatar,
        badgeContent: 99
      })
      IBestAvatar({
        src: this.avatar,
        shape: 'square',
        badgeIcon: "medal",
        badgeIconColor: Color.Red,
        badgePosition: "bottom-right"
      })
      IBestAvatar({
        text: "张",
        randomBgColor: true,
        dot: true
      })
    }
  }
}

默认头像 ​

默认头像

TIP

· 当头像加载失败时, 会显示默认头像。
· 通过 defaultAvatar 可设置默认头像。
· 通过 IBestSetGlobalConfig 方法可设置全局默认头像。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State avatar: string = 'https://img1.baidu.com/it/u=700838104,4078529388'
  build() {
    Row({space: 20}) {
      IBestAvatar({
        src: this.avatar
      })
    }
  }
}

头像组 ​

头像组

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State urls: string[] = [
    "https://img1.baidu.com/it/u=700838104,4078529388&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    "https://img0.baidu.com/it/u=447148445,3812237851&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    "https://img0.baidu.com/it/u=1596600438,2136408442&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    "https://img0.baidu.com/it/u=2816983398,655618517&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    "https://pics4.baidu.com/feed/1ad5ad6eddc451da34d4638413f67668d016325c.jpeg",
    "https://img0.baidu.com/it/u=2397297586,1192210697&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    "https://img0.baidu.com/it/u=781626259,587761743&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300",
    "https://img0.baidu.com/it/u=3731477373,291511913&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
  ]
  build() {
    Column({space: 20}){
      IBestAvatarGroup({
        urls: this.urls,
        onMoreClick: () => {
          IBestToast.show('点击了更多')
        }
      })
      IBestAvatarGroup({
        urls: this.urls,
        shape: 'square',
        gap: 0.3,
        max: 7,
        moreText: '更多',
        onMoreClick: () => {
          IBestToast.show('点击了更多')
        }
      })
    }
    .alignItems(HorizontalAlign.Start)
  }
}

API ​

IBestAvatar @Props ​

参数说明类型默认值
src头像地址PixelMap | ResourceStr | DrawableDescriptor''
shape头像形状，可选值 square 、circlestringcircle
avatarSize头像大小string | number40
objectFit头像裁剪类型ImageFitImageFit.Cover
radius圆角值Length | BorderRadiuses | LocalizedBorderRadiuses4
bgColor背景色ResourceColor#c8c9cc
text文字替代图片, 优先级高于srcResourceStr''
icon显示的图标, 优先级大于textResourceStr''
iconColor图标、文字颜色ResourceColor#ffffff
iconFontSize图标、文字大小string | number18
randomBgColor随机背景色booleanfalse
defaultAvatar默认头像，可全局配置ResourceStr''
badgeContent徽标内容string | number''
badgeIcon徽标图标, 优先级高于 content dotResourceStr''
badgeIconSize徽标图标大小string | number12
badgeIconColor徽标图标颜色ResourceColor''
badgeColor徽标背景色ResourceColor#DB3131
dot是否展示为小红点booleanfalse
max最大值,超过最大值会显示 {max}+,仅当 content 为数字时有效number-1
showZero值为0时是否显示徽标booleantrue
badgePosition徽标位置, 可选值 top-left top-right bottom-left bottom-rightstringtop-right

IBestAvatar Events ​

事件名说明回调参数
onAvatarClick点击头像的回调事件-

IBestAvatarGroup @Props ​

参数说明类型默认值
urls头像地址列表(PixelMap | ResourceStr | DrawableDescriptor)[][]
max最多展示数量number5
shape头像形状，可选值 square 、circlestringcircle
avatarSize头像大小string | number40
objectFit头像裁剪类型ImageFitImageFit.Cover
radius圆角值LengthBorderRadiuses | LocalizedBorderRadiuses
gap头像之间遮挡比例（0.5 代表遮挡 50%）number0.5
showMore超出max时是否显示更多提示booleantrue
moreText更多文案, 默认为 +n，n为超出max数量, 仅当showMore为true时生效，当头像列表小于max时，也可设置moreText强制显示更多ResourceStr''
moreTextSize更多文案大小string | number14

IBestAvatarGroup Events ​

事件名说明回调参数
onMoreClick点击更多的回调事件-