Tantalum UI

Avatar/AvatarGroup 头像 

import { TaAvatar, TaCell, TaGroup } from '@/index'

export default function ExpAvatar() {
  return (
    <>
      <TaGroup title="基础用法">
        <TaCell label="默认">
          <TaAvatar />
        </TaCell>
        <TaCell label="图片（src=xxx）">
          <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/5.png" />
        </TaCell>
        <TaCell label="文字">
          <TaAvatar>曹</TaAvatar>
        </TaCell>
      </TaGroup>
      <TaGroup title="色彩（color）">
        <div className="exp-avatar-custom-list">
          <TaAvatar color="#ff4d4f">DR</TaAvatar>
          <TaAvatar color="#ff7a45">V</TaAvatar>
          <TaAvatar color="#fa8c16">SO</TaAvatar>
          <TaAvatar color="#faad14">CG</TaAvatar>
          <TaAvatar color="#fadb14">SY</TaAvatar>
          <TaAvatar color="#597ef7">GB</TaAvatar>
          <TaAvatar color="#1890ff">DB</TaAvatar>
          <TaAvatar color="#36cfc9">C</TaAvatar>
          <TaAvatar color="#52c41a">PG</TaAvatar>
          <TaAvatar color="#a0d911">L</TaAvatar>
          <TaAvatar color="#9254de">GP</TaAvatar>
          <TaAvatar color="#f759ab">M</TaAvatar>
        </div>
      </TaGroup>
      <TaGroup title="形状（shape）">
        <TaCell label="circle">
          <TaAvatar shape="circle" />
        </TaCell>
        <TaCell label="square">
          <TaAvatar shape="square" />
        </TaCell>
      </TaGroup>
      <TaGroup title="尺寸（size）">
        <div className="exp-avatar-custom-list">
          <TaAvatar size={24}>24</TaAvatar>
          <TaAvatar size="small">SM</TaAvatar>
          <TaAvatar size="middle">MD</TaAvatar>
          <TaAvatar size="large">LG</TaAvatar>
        </div>
      </TaGroup>
      <TaGroup title="角标">
        <TaCell label="gender">
          <div className="exp-avatar-list">
            <TaAvatar
              shape="square"
              gender="man"
              src="https://cdn.fox2.cn/vfox/avatar/1.png"
            />
            <TaAvatar
              shape="square"
              gender="woman"
              src="https://cdn.fox2.cn/vfox/avatar/2.png"
            />
            <TaAvatar
              shape="circle"
              gender="man"
              src="https://cdn.fox2.cn/vfox/avatar/3.png"
            />
            <TaAvatar
              shape="circle"
              gender="woman"
              src="https://cdn.fox2.cn/vfox/avatar/4.png"
            />
          </div>
        </TaCell>
        <TaCell label="badge">
          <div className="exp-avatar-list">
            <TaAvatar shape="square" badge="99" />
            <TaAvatar shape="square" badge={{ content: 1, dot: true }} />
          </div>
        </TaCell>
      </TaGroup>
      <TaGroup title="头像组">
        <TaCell label="size=small">
          <TaAvatar.Group size="small">
            <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/5.png" />
            <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/6.png" />
            <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/7.png" />
          </TaAvatar.Group>
        </TaCell>
        <TaCell label="totalCount=123456">
          <TaAvatar.Group size="small" totalCount="123456" countColor="#6667AB">
            <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/1.png" />
            <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/2.png" />
            <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/3.png" />
            <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/4.png" />
          </TaAvatar.Group>
        </TaCell>
      </TaGroup>
    </>
  )
}

Import 

import { TaAvatar, TaAvatarGroup } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

import type {
  BadgeOption,
  AvatarShape,
  AvatarSize
} from 'tantalum-ui-mobile-react'

Avatar

Avatar Props

属性类型默认值必填说明
srcstring否图片连接，显示自定义图片
sizeAvatarSize'middle'否头像尺寸，处除了预设值，还支持传入 number
shapeAvatarShape'circle'否头像形状
badgeBadgeOption否徽标，使用 Badge 组件
genderstring否显示男女角标，优先级高于 badge
colorstring否自定义色彩，支持 hex rgb hsl 等写法，详细效果查看

AvatarSize 的合法值

值说明
large大尺寸，宽高 64px，文字 32px，图标 43px
middle默认值，中尺寸，宽高 48px，文字 24px，图标 32px
small小尺寸，宽高 36px，文字 18px，图标 21px

AvatarShape 的合法值

值说明
circle圆形头像
square圆角方形头像

BadgeOption 

type BadgeOption =
  | number
  | string
  | Partial<{
      color: string
      content: string | number
      offset: number[]
      animated: boolean
      dot: boolean
      maxCount: number
      showZero: boolean
    }>

参数主要是基于 Badge 组件的 props，如果传入是 number 或者 string 则设置直接设置 content 属性。

Avatar Slots

children 

<TaAvatar>曹</TaAvatar>

AvatarGroup

AvatarGroup Props

属性类型默认值必填说明
sizeAvatarSize'middle'否组内头像尺寸，处除了预设值，还支持传入 number
totalCountnumber否尾部显示头像数，如果数值过高，会对数值简化处理，如 1.1w
countColorstring否头像数模块的自定义色彩，支持 hex rgb hsl 等写法，详细效果查看

AvatarGroup Slots

children

注：其中只可放置 Avatar 组件，否则会导致未定义的行为。

<TaAvatar.Group>
  <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/5.png" />
  <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/6.png" />
  <TaAvatar src="https://cdn.fox2.cn/vfox/avatar/7.png" />
</TaAvatar.Group>