TaroifyReact UI

    Avatar 头像

    介绍

    显示用户头像、首字母或备用图标。

    引入

    import { Avatar } from "@taroify/core"

    代码演示

    基础用法

    设置 style 可以修改,背景颜色

    <Avatar>P</Avatar>
<Avatar style={{ background: "green" }}>N</Avatar>
<Avatar style={{ background: "pink" }}>HP</Avatar>

    尺寸

    设置 size 属性后，可以选择四个大小。

    <Avatar src="https://joesch.moe/api/v1/random" size="mini" />
<Avatar src="https://joesch.moe/api/v1/random" size="small" />
<Avatar src="https://joesch.moe/api/v1/random" size="medium" />
<Avatar src="https://joesch.moe/api/v1/random" size="large" />

    形状

    通过 variant 属性来设置形状。

    <Avatar src="https://joesch.moe/api/v1/random" />
<Avatar src="https://joesch.moe/api/v1/random" shape="square" />
<Avatar src="https://joesch.moe/api/v1/random" shape="rounded" />

    群组

    最多显示5个。

    <Avatar.Group total={24}>
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
</Avatar.Group>

    最大

    通过 max 属性最大可展示数量,最多显示5个。

    <Avatar.Group max={3}>
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
</Avatar.Group>

    图标

    <Avatar style={{ background: "red" }}>
  <Cross />
</Avatar>
<Avatar style={{ background: "pink" }}>
  <LocationOutlined />
</Avatar>
<Avatar style={{ background: "green" }}>
  <SettingOutlined />
</Avatar>

    徽章

    <Badge className="avatar-dot" dot position="bottom-right">
  <Avatar src="https://joesch.moe/api/v1/random" />
</Badge>
<Badge
  className="avatar-avatar"
  content={<Avatar src="https://joesch.moe/api/v1/random" />}
  position="bottom-right"
>
  <Avatar src="https://joesch.moe/api/v1/random" />
</Badge>
    .avatar-dot {
  bottom: 2px * 2;
  right: 6px * 2,
}

.avatar-avatar {
  --badge-background-color: transparent;
  --badge-padding: 0;
  --badge-size: 12px * 2;
  --avatar-size: var(--badge-size);
  bottom: 2px * 2;
  right: 6px * 2,
}

    API

    Avatar Props

    参数说明类型默认值
    src传入图片的链接,传入之后嵌套内容不展示string-
    alt图片不显示时的文本内容string-
    shape形状，可选值为 square rounded circlestringcircle
    size大小，可选值为 mini small medium largestringmedium

    Avatar.Group Props

    参数说明类型默认值
    shape形状，可选值为 square rounded circlestringcircle
    spacing间距，可选值为 small medium largestringmedium
    limit显示的最大头像个数number-
    total头像总数。用于计算额外头像的数量。string-

    主题定制

    样式变量

    组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

    名称默认值描述
    --avatar-colorvar(--white)-
    --avatar-background-colorvar(--gray-5)-
    --avatar-border-colorvar(--white)-
    --avatar-border-width2PX-
    --avatar-font-weightvar(--font-weight-bold)-
    --avatar-font-familyRoboto, Helvetica, Arial, sans-serif-
    --avatar-font-size-minivar(--avatar-font-size, var(--font-size-xs))-
    --avatar-font-size-smallvar(--avatar-font-size, var(--font-size-sm))-
    --avatar-font-size-mediumvar(--avatar-font-size, var(--font-size-md))-
    --avatar-font-size-largevar(--avatar-font-size, var(--font-size-lg))-
    --avatar-border-radius-minivar(--avatar-border-radius, 2px * $hd)-
    --avatar-border-radius-smallvar(--avatar-border-radius, 4px * $hd)-
    --avatar-border-radius-mediumvar(--avatar-border-radius, 5px * $hd)-
    --avatar-border-radius-largevar(--avatar-border-radius, 6px * $hd)-
    --avatar-size-minivar(--avatar-size, 16px * $hd)-
    --avatar-size-smallvar(--avatar-size, 26px * $hd)-
    --avatar-size-mediumvar(--avatar-size, 38px * $hd)-
    --avatar-size-largevar(--avatar-size, 56px * $hd)-
    --avatar-spacing-minivar(--avatar-spacing, var(--padding-xs))-
    --avatar-spacing-smallvar(--avatar-spacing, var(--padding-sm))-
    --avatar-spacing-mediumvar(--avatar-spacing, var(--padding-md))-
    --avatar-spacing-largevar(--avatar-spacing, var(--padding-lg))-