头像 - Semi Design Next

代码演示

如何引入

import { Avatar, AvatarGroup } from '@fibrous/semi-ui-react';

尺寸

可以通过 size 属性设置图标大小，支持extra-extra-small，extra-small，small，default，medium，large，extra-large。

UUUUUUU

代码

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar size="extra-extra-small" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar size="extra-small" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar size="small" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar size="default" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar size="large" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar size="extra-large" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
        </div>
    );
}

颜色

Avatar 支持默认色板的 15 种颜色和白色，包括：amber、 blue、 cyan、 green、 grey、 indigo、 light-blue、 light-green、 lime、 orange、 pink、 purple、 red、 teal、 violet、 yellow。也可以通过 style 来自定义颜色样式。默认为grey。

ASBMTJZLYZ

代码

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar style={{ margin: 4 }} alt="Alice Swift">
                AS
            </Avatar>
            <Avatar color="red" style={{ margin: 4 }} alt="Bob Matteo">
                BM
            </Avatar>
            <Avatar color="light-blue" style={{ margin: 4 }} alt="Taylor Joy">
                TJ
            </Avatar>
            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf', margin: 4 }} alt="Zank Lance">
                ZL
            </Avatar>
            <Avatar style={{ backgroundColor: '#87d068', margin: 4 }} alt="Youself Zhang">
                YZ
            </Avatar>
        </div>
    );
}

自适应字符大小

字符类型的头像，字体大小会根据头像宽度自适应调整。使用gap调整字符头像距离左右两侧的像素大小。

ASSemiSemi

代码

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar style={{ margin: 4 }}>AS</Avatar>
            <Avatar style={{ margin: 4 }} gap={4}>
                Semi
            </Avatar>
            <Avatar style={{ margin: 4 }} gap={10}>
                Semi
            </Avatar>
        </div>
    );
}

图片

可以通过 src 设置图片格式的头像。

代码

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar alt="漂亮的猫咪" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
            <Avatar alt="可爱的猫咪" size="small" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
        </div>
    );
}

形状

Avatar 支持 circle、square 两种形状，默认为 circle。

代码

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar shape="square" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
        </div>
    );
}

事件

Avatar 支持 onClick、onMouseEnter、onMouseLeave。其中 hover 状态下可以通过 hoverMask 属性传入覆盖层的内容。覆盖层无默认样式。

代码

import { IconCamera } from '@fibrous/semi-icons-react';
import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    const style = {
        backgroundColor: 'var(--semi-color-overlay-bg)',
        height: '100%',
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    };
    const hover = (
        <div style={style}>
            <IconCamera />
        </div>
    );

    return (
        <Avatar hoverMask={hover} color="red" alt="Bob Downton">
            BD
        </Avatar>
    );
}

顶部和底部 Slot

直播

代码

import { IconPlus } from '@fibrous/semi-icons-react';
import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <Avatar
            alt="beautiful cat"
            src="/assets/placeholder/avatar-a.svg"
            style={{ margin: 4 }}
            size="large"
            border={{ color: '#FE2C55', motion: true }}
            contentMotion
            topSlot={{
                text: '直播',
                gradientStart: 'rgb(255,23,100)',
                gradientEnd: 'rgb(237,52,148)',
            }}
            bottomSlot={{
                shape: 'circle',
                bgColor: '#FE2C55',
                text: <IconPlus />,
            }}
        />
    );
}

顶部

直播

代码

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar
                color="amber"
                topSlot={{
                    text: '直播',
                    gradientStart: 'rgb(255,23,100)',
                    gradientEnd: 'rgb(237,52,148)',
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="large"
                topSlot={{
                    text: '直播',
                    gradientStart: 'rgb(255,23,100)',
                    gradientEnd: 'rgb(237,52,148)',
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="extra-large"
                topSlot={{
                    text: '直播',
                    gradientStart: 'rgb(255,23,100)',
                    gradientEnd: 'rgb(237,52,148)',
                }}
            >
                T
            </Avatar>
        </div>
    );
}

底部

直播中

代码

import { IconPlus } from '@fibrous/semi-icons-react';
import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar
                color="amber"
                bottomSlot={{
                    shape: 'square',
                    bgColor: '#FE2C55',
                    text: '直播中',
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="large"
                bottomSlot={{
                    shape: 'square',
                    bgColor: '#FE2C55',
                    text: '直播中',
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="extra-large"
                bottomSlot={{
                    shape: 'square',
                    bgColor: '#FE2C55',
                    text: '直播中',
                }}
            >
                T
            </Avatar>
            <br />
            <br />
            <br />
            <Avatar
                color="amber"
                bottomSlot={{
                    shape: 'circle',
                    bgColor: '#FE2C55',
                    text: <IconPlus />,
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="large"
                bottomSlot={{
                    shape: 'circle',
                    bgColor: '#FE2C55',
                    text: <IconPlus />,
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="extra-large"
                bottomSlot={{
                    shape: 'circle',
                    bgColor: '#FE2C55',
                    text: <IconPlus />,
                }}
            >
                T
            </Avatar>
        </div>
    );
}

额外边框

代码

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar color="amber" border style={{ marginRight: '8px' }}>
                T
            </Avatar>

            <Avatar color="amber" border style={{ marginRight: '8px' }}>
                T
            </Avatar>

            <Avatar color="amber" border style={{ marginRight: '8px' }}>
                T
            </Avatar>
        </div>
    );
}

额外动效

通过 border 的 motion 字段和 contentMotion 开启边框和内容区域的额外动效。

代码

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar color="amber" border={{ motion: true }} style={{ marginRight: '8px' }} contentMotion>
                T
            </Avatar>

            <Avatar color="amber" border={{ motion: true }} size="large" style={{ marginRight: '8px' }} contentMotion>
                T
            </Avatar>

            <Avatar color="amber" border={{ motion: true }} size="extra-large" style={{ marginRight: '8px' }} contentMotion>
                T
            </Avatar>
        </div>
    );
}

头像组

可以通过 AvatarGroup 将 avatar 显示为组。

LLCXRMZLYZ

代码

import { AvatarGroup, Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <AvatarGroup>
                <Avatar color="red" alt="Lisa LeBlanc">
                    LL
                </Avatar>
                <Avatar alt="Caroline Xiao">CX</Avatar>
                <Avatar color="amber" alt="Rafal Matin">
                    RM
                </Avatar>
                <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt="Zank Lance">
                    ZL
                </Avatar>
                <Avatar style={{ backgroundColor: '#87d068' }} alt="Youself Zhang">
                    YZ
                </Avatar>
            </AvatarGroup>
        </div>
    );
}

可以通过 maxCount 设置展示的头像数量。

LLCXRM+2

代码

import { AvatarGroup, Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <AvatarGroup maxCount={3}>
                <Avatar color="red" alt="Lisa LeBlanc">
                    LL
                </Avatar>
                <Avatar alt="Caroline Xiao">CX</Avatar>
                <Avatar color="amber" alt="Rafal Matin">
                    RM
                </Avatar>
                <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt="Zank Lance">
                    ZL
                </Avatar>
                <Avatar style={{ backgroundColor: '#87d068' }} alt="Youself Zhang">
                    YZ
                </Avatar>
            </AvatarGroup>
        </div>
    );
}

可以通过 renderMore 自定义 more 标签。

LLCXRM+2

代码

import React, { type ReactNode } from 'react';
import { AvatarGroup, Avatar, Popover, type AvatarProps } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    const renderMore = (restNumber?: number, restAvatars: ReactNode[] = []) => {
        const content = restAvatars.map((avatar, index) => {
            return (
                <div style={{ paddingBottom: '12px' }} key={index}>
                    {React.isValidElement<AvatarProps>(avatar) && React.cloneElement(avatar, { size: 'extra-small' })}
                    <span style={{ marginLeft: 8, fontSize: 14 }}>这是段文字描述</span>
                </div>
            );
        });
        return (
            <Popover content={content} autoAdjustOverflow={false} position="bottomRight" style={{ padding: '12px 8px', paddingBottom: 0 }}>
                <Avatar>{`+${restNumber}`}</Avatar>
            </Popover>
        );
    };

    return (
        <AvatarGroup maxCount={3} renderMore={renderMore}>
            <Avatar color="red" alt="Lisa LeBlanc">
                LL
            </Avatar>
            <Avatar alt="Caroline Xiao">CX</Avatar>
            <Avatar color="amber" alt="Rafal Matin">
                RM
            </Avatar>
            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt="Zank Lance">
                ZL
            </Avatar>
            <Avatar style={{ backgroundColor: '#87d068' }} alt="Youself Zhang">
                YZ
            </Avatar>
        </AvatarGroup>
    );
}

可以通过 overlapFrom 控制头像组的覆盖方式。可选值有 start 和 end，分别表示左边覆盖右边和右边覆盖左边。默认值为 start。

LLCXRMZLYZ

代码

import { AvatarGroup, Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <div>
                <AvatarGroup overlapFrom="start">
                    <Avatar color="red" alt="Lisa LeBlanc">
                        LL
                    </Avatar>
                    <Avatar alt="Caroline Xiao">CX</Avatar>
                    <Avatar color="amber" alt="Rafal Matin">
                        RM
                    </Avatar>
                    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt="Zank Lance">
                        ZL
                    </Avatar>
                    <Avatar style={{ backgroundColor: '#87d068' }} alt="Youself Zhang">
                        YZ
                    </Avatar>
                </AvatarGroup>
            </div>
            <div>
                <AvatarGroup overlapFrom="end">
                    <Avatar color="red" alt="Lisa LeBlanc">
                        LL
                    </Avatar>
                    <Avatar alt="Caroline Xiao">CX</Avatar>
                    <Avatar color="amber" alt="Rafal Matin">
                        RM
                    </Avatar>
                    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt="Zank Lance">
                        ZL
                    </Avatar>
                    <Avatar style={{ backgroundColor: '#87d068' }} alt="Youself Zhang">
                        YZ
                    </Avatar>
                </AvatarGroup>
            </div>
        </div>
    );
}

API 参考

Avatar

Props

属性	说明	类型	默认值
alt	图片的替代文本；文字头像上它是可访问名称，未设置时使用头像的文字内容。	`string`	-
border	额外边框，传 `true` 或 `{ color, motion }`；`motion` 为 `true` 时开启边框动效。	`{ color?: string; motion?: boolean; } \| boolean`	-
bottomSlot	底部标记配置，包含 `shape`、`text`、`bgColor`、`textColor`、`className` 和 `style`；传入 `render` 时完全由它渲染。仅在 `extra-small` 至 `extra-large` 的预设尺寸下显示。	`Type`	-
children	头像内的文字或自定义内容。	`React.ReactNode`	-
className	头像主体元素（`.semi-avatar`）的类名；使用额外边框或顶部、底部标记时，它位于外层包裹元素之内。	`string`	-
color	头像的预设背景颜色，可选 `amber`、`blue`、`cyan`、`green`、`grey`、`indigo`、`light-blue`、`light-green`、`lime`、`orange`、`pink`、`purple`、`red`、`teal`、`violet`、`yellow`；图片头像不使用。	`AvatarColor`	`"grey"`
contentMotion	启用头像内容区域的动画。	`boolean`	-
gap	文字内容与头像左右两侧的间距，单位为像素。	`number`	`3`
hoverMask	鼠标悬停时显示的覆盖层内容，覆盖层没有默认样式。	`React.ReactNode`	-
imgAttr	传给内部 `img` 元素的原生属性，仅图片头像有效；其中的 `onError` 先于组件的 `onError` 调用。	`Type`	-
onClick	单击头像时调用，参数为 React 鼠标事件。传入后头像可以聚焦，按 `Enter` 或空格键会触发点击。	`React.MouseEventHandler`	-
onError	图片加载失败时调用，不传事件参数。返回 `false` 时保留损坏的图片，不切换为文字回退。	`React.MouseEventHandler`	-
onMouseEnter	鼠标移入时调用，参数为 React 鼠标事件。	`React.MouseEventHandler`	-
onMouseLeave	鼠标移出时调用，参数为 React 鼠标事件。	`React.MouseEventHandler`	-
ref	头像主体元素（`.semi-avatar`）的引用；使用额外边框或顶部、底部标记时，它不是外层包裹元素。	`Type`	-
shape	头像形状，可选 `circle` 或 `square`。	`AvatarShape`	`"circle"`
size	头像尺寸，可选 `extra-extra-small`、`extra-small`、`small`、`default`、`medium`、`large`、`extra-large`，也可以传合法的 CSS 尺寸，如 `10px`。	`string`	`"medium"`
src	图片头像的资源地址。	`string`	-
srcSet	图片头像的响应式资源集合。	`string`	-
style	头像样式；使用额外边框、顶部或底部标记时，样式落在外层包裹元素上。	`CSSProperties`	-
topSlot	顶部标记配置，包含 `text`、`gradientStart`、`gradientEnd`、`textColor`、`className` 和 `style`；传入 `render` 时完全由它渲染。仅在圆形且预设尺寸为 `extra-small` 至 `extra-large` 时显示，渐变色未设置时使用 `var(--semi-color-primary)`。	`Type`	-

其他原生属性（如 id、data-*）落在头像主体元素（.semi-avatar）上；可点击头像的 tabIndex 与 aria-* 落在内部唯一的焦点元素上。使用 border、topSlot 或 bottomSlot 时，style、onClick、onMouseEnter 与 onMouseLeave 落在外层包裹元素上。

AvatarGroup

Props

属性	说明	类型	默认值
children	组内的 Avatar。	`React.ReactNode`	-
maxCount	显示的最大头像数，超出后显示 `+N` 标签。	`number`	-
overlapFrom	头像重叠方向，可选 `start` 或 `end`：`start` 时左边的头像覆盖右边，`end` 时右边的头像覆盖左边。	`AvatarGroupOverlapFrom`	`"start"`
ref	根元素（`role="list"`）的引用。	`Type`	-
renderMore	自定义溢出标签。调用时传入剩余数量和被隐藏的头像节点数组，返回的内容替代默认的 `+N`。	`Type`	-
shape	组内头像的形状，可选 `circle` 或 `square`。	`AvatarGroupShape`	`"circle"`
size	组内头像的尺寸，取值同 Avatar 的 `size`。	`string`	`"medium"`

className、style、aria-*、data-* 等其他属性会落在 AvatarGroup 的根元素（role="list"）上，不会传给组内的头像。

Accessibility

Avatar 一般不用于操作，不需要被获取焦点。但当 Avatar 可以被点击操作时（如：Semi 官网上方的头像）需要被聚焦，并响应键盘 Enter 和空格事件。
可点击且有图片或文字的 Avatar 只有一个 Tab 停靠点，即图片或文字标签；它收到的焦点顺序与 aria-* 属性（包括 Tooltip 注入的）都落在这个元素上。
当 Avatar 与其他组件结合使用时，需要同时检查该组件的可访问性指南。
Avatar的alt属性可以被屏幕阅读器读取，使用头像组件时，请使用alt 属性解释头像的内容。

import React from 'react';
import { Avatar } from '@fibrous/semi-ui-react';

() => {
    return (
        <>
            {/* Good case */}
            <Avatar alt="一只可爱的猫咪" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
            <Avatar alt="姜鹏志" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
            {/* Bad case */}
            <Avatar alt="" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
            <Avatar alt="姜鹏志的图片" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
        </>
    );
};

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$animation_duration-additionalBorder	800ms	边框动画持续时间
$animation_duration-content	1000ms	内容动画持续时间
$animation_opacity-additionalBorder-start	1	边框动画起始透明度
$animation_opacity-additionalBorder-end	0	边框动画结束透明度
$animation_scale-additionalBorder-start	1	边框动画起始缩放比例
$animation_scale-additionalBorder-end	1.15	边框动画结束缩放比例
$animation_scale-content-start	1	边框动画起始缩放比例
$animation_scale-content-middle	0.9	边框动画中间态缩放比例
$z-avatar-default	100	头像 z-index
$color-avatar_default-border-default	var(--semi-color-bg-1)	头像描边颜色
$color-avatar_more_default-bg-default	var(--semi-grey-5)	「更多」描边颜色
$color-avatar-outline-focus	$color-focus-ring	头像聚焦轮廓颜色
$width-avatar_extra_extra_small	20px	头像尺寸 - 极小
$font-avatar_extra_extra_small-size	10px	文本字号 - 极小
$font-avatar_extra_extra_small-lineHeight	15px	文本行高 - 极小
$width-avatar_extra_small	24px	头像尺寸 - 超小
$font-avatar_extra_small-size	10px	文本字号 - 超小
$font-avatar_extra_small-lineHeight	15px	文本行高 - 超小
$width-avatar_small	32px	头像尺寸 - 小
$width-avatar_default	40px	头像尺寸 - 默认
$width-avatar_medium	48px	头像尺寸 - 中
$width-avatar_large	72px	头像尺寸 - 大
$width-avatar_extra_large	128px	头像尺寸 - 超大
$font-avatar_extra_large-size	64px	文本字号 - 超大
$font-avatar_extra_large-lineHeight	77px	文本行高 - 超大
$radius-avatar	var(--semi-border-radius-circle)	头像圆角
$width-avatar_extra_large-border	3px	头像组头像描边尺寸 - 超大
$spacing-avatar_extra_large-marginLeft	-32px	头像组头像左侧外边距 - 超大
$width-avatar_large-border	3px	头像组头像描边尺寸 - 大
$spacing-avatar_large-marginLeft	-18px	头像左侧外边距 - 大
$width-avatar_medium-border	2px	头像组头像描边尺寸 - 中
$spacing-avatar_medium-marginLeft	-12px	头像左侧外边距 - 中
$width-avatar_default-border	2px	头像组头像描边尺寸 - 默认
$spacing-avatar_default-marginLeft	-12px	头像左侧外边距 - 默认
$width-avatar_small-border	2px	头像组头像描边尺寸 - 小
$spacing-avatar_small-marginLeft	-12px	头像左侧外边距 - 小
$width-avatar_extra_small-border	1px	头像组头像描边尺寸 - 超小
$spacing-avatar_extra_small-marginLeft	-10px	头像左侧外边距 - 超小
$width-avatar_extra_extra_small-border	1px	头像组头像描边尺寸 - 极小
$spacing-avatar_extra_extra_small-marginLeft	-4px	头像左侧外边距 - 极小
$width-avatar-outline	$width-focus-ring	头像聚焦轮廓宽度
$width-avatar_additional-border	1.5px	额外描边尺寸
$color-avatar_additional-border	var(--semi-color-primary)	额外描边颜色
$spacing-avatar_additional-borderGap	2px	额外描边与内侧间距
$width-avatar-bottom_slot_circle_extra_small	12px	extra small 头像底部 slot 圆形半径
$width-avatar-bottom_slot_circle_small	12px	small 头像底部 slot 圆形半径
$width-avatar-bottom_slot_circle_default	16px	default 头像底部 slot 圆形半径
$width-avatar-bottom_slot_circle_medium	18px	medium 头像底部 slot 圆形半径
$width-avatar-bottom_slot_circle_large	28px	large 头像底部 slot 圆形半径
$width-avatar-bottom_slot_circle_extra_large	28px	extra large 头像底部 slot 圆形半径
$color-avatar-bottom_slot_bg	var(--semi-color-primary)	头像底部 slot 背景色
$radius-avatar-bottom_slot_square	4px	底部 slot square 圆角
$font-avatar_bottom_slot-extra_small-fontSize	5px	extra small 底部 slot 文字大小
$font-avatar_bottom_slot-small-fontSize	5px	small 底部 slot 文字大小
$font-avatar_bottom_slot-default-fontSize	12px	default 底部 slot 文字大小
$font-avatar_bottom_slot-medium-fontSize	12px	medium 底部 slot 文字大小
$font-avatar_bottom_slot-large-fontSize	12px	large 底部 slot 文字大小
$font-avatar_bottom_slot-extra_large-fontSize	14px	extra large 底部 slot 文字大小
$spacing-avatar-bottom_slot_square-paddingX	4px	底部 slot square 形状左边距
$spacing-avatar-bottom_slot_square-paddingY	1px	底部 slot square 形状右边距
$font-avatar_top_slot-small-fontSize	5px	small 顶部 slot 文字大小
$font-avatar_top_slot-default-fontSize	6px	default 顶部 slot 文字大小
$font-avatar_top_slot-medium-fontSize	8px	medium 顶部 slot 文字大小
$font-avatar_top_slot-large-fontSize	14px	large 顶部 slot 文字大小
$font-avatar_top_slot-extra_large-fontSize	16px	extra large 顶部 slot 文字大小
$spacing-avatar-top_slot_small-content-marginTop	0px	small 顶部文字 marginTop
$spacing-avatar-top_slot_default-content-marginTop	-2px	default 顶部文字 marginTop
$spacing-avatar-top_slot_medium-content-marginTop	0px	medium 顶部文字 marginTop
$spacing-avatar-top_slot_large-content-marginTop	0px	large 顶部文字 marginTop
$spacing-avatar-top_slot_extra_large-content-marginTop	0px	extra large 顶部文字 marginTop
$color-avatar-bottom_slot_square-border	var(--semi-color-bg-0)	底部 square 边框颜色
$width-avatar-bottom_slot_square_extra_small-border	2px	small 头像底部 square 边框宽度
$width-avatar-bottom_slot_square_small-border	2px	small 头像底部 square 边框宽度
$width-avatar-bottom_slot_square_default-border	2px	default 头像底部 square 边框宽度
$width-avatar-bottom_slot_square_medium-border	2px	medium 头像底部 square 边框宽度
$width-avatar-bottom_slot_square_large-border	2px	large 头像底部 square 边框宽度
$width-avatar-bottom_slot_square_extra_large-border	2px	extra large 头像底部 square 边框宽度
$color-avatar-top_slot_text	var(--semi-color-bg-0)	顶部 Slot 文字颜色
$spacing-avatar-top_slot_small-shift	-28px	small 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
$spacing-avatar-top_slot_default-shift	-32px	default 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
$spacing-avatar-top_slot_medium-shift	-30px	medium 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
$spacing-avatar-top_slot_large-shift	-30px	large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
$spacing-avatar-top_slot_extra_large-shift	-32px	extra large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
$spacing-avatar-top_slot_small-scale	0.4	small 顶部 slot 缩放比例
$spacing-avatar-top_slot_default-scale	0.7	default 顶部 slot 缩放比例
$spacing-avatar-top_slot_medium-scale	0.8	medium 顶部 slot 缩放比例
$spacing-avatar-top_slot_large-scale	1.1	large 顶部 slot 缩放比例
$spacing-avatar-top_slot_extra_large-scale	1.4	large 顶部 slot 缩放比例
$radius-avatar_extra_extra_small	3px	极小尺寸头像的圆角
$radius-avatar_extra_small	3px	超小尺寸头像的圆角
$radius-avatar_small	3px	小尺寸头像的圆角
$radius-avatar_default	3px	默认尺寸头像的圆角
$radius-avatar_medium	3px	中尺寸头像的圆角
$radius-avatar_large	6px	大尺寸头像的圆角
$radius-avatar_extra_large	12px	超大尺寸头像的圆角