头像 - Semi Design Next

代码演示

如何引入

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

尺寸

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

UUUUUUU

代码

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

export default function AvatarDemo() {
    return (
        <div>
            <Avatar size="extra-extra-small" style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar size="extra-small" style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar size="small" style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar size="default" style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar size="large" style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar size="extra-large" style={{ margin: '4px' }} 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-solid';

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

自适应字符大小

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

ASSemiSemi

代码

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

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

图片

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

代码

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

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

形状

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

代码

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

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

事件

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

代码

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

const overlayStyle = {
    'background-color': 'var(--semi-color-overlay-bg)',
    height: '100%',
    width: '100%',
    display: 'flex',
    'align-items': 'center',
    'justify-content': 'center',
};

export default function AvatarDemo() {
    return (
        <Avatar
            hoverMask={
                <div style={overlayStyle}>
                    <IconCamera />
                </div>
            }
            color="red"
            alt="Bob Downton"
        >
            BD
        </Avatar>
    );
}

顶部和底部 Slot

topSlot、bottomSlot 属性配置标记的外观与文字；text 传函数时渲染自定义内容（如图标），只在标记显示时调用；传入 render 函数时，由它完全渲染标记。

直播

代码

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

export default function AvatarDemo() {
    return (
        <Avatar
            alt="beautiful cat"
            src="/assets/placeholder/avatar-a.svg"
            style={{ margin: '4px' }}
            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-solid';

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-solid';
import { Avatar } from '@fibrous/semi-ui-solid';

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-solid';

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

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

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

额外动效

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

代码

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

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

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

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

头像组

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

LLCXRMZLYZ

代码

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

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', 'background-color': '#fde3cf' }} alt="Zank Lance">
                    ZL
                </Avatar>
                <Avatar style={{ 'background-color': '#87d068' }} alt="Youself Zhang">
                    YZ
                </Avatar>
            </AvatarGroup>
        </div>
    );
}

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

LLCXRM+2

代码

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

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', 'background-color': '#fde3cf' }} alt="Zank Lance">
                    ZL
                </Avatar>
                <Avatar style={{ 'background-color': '#87d068' }} alt="Youself Zhang">
                    YZ
                </Avatar>
            </AvatarGroup>
        </div>
    );
}

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

LLCXRM+2

代码

import { For } from 'solid-js';
import { Avatar, AvatarGroup, Popover, type AvatarGroupProps } from '@fibrous/semi-ui-solid';

const renderMore: AvatarGroupProps['renderMore'] = (restNumber, restAvatars) => (
    <Popover
        content={
            <div>
                <For each={restAvatars}>
                    {(avatar) => (
                        <div style={{ 'padding-bottom': '12px' }}>
                            {avatar({ size: 'extra-small' })}
                            <span style={{ 'margin-left': '8px', 'font-size': '14px' }}>这是段文字描述</span>
                        </div>
                    )}
                </For>
            </div>
        }
        autoAdjustOverflow={false}
        position="bottomRight"
        style={{ padding: '12px 8px', 'padding-bottom': '0' }}
    >
        {(trigger) => <Avatar {...trigger()}>{`+${restNumber}`}</Avatar>}
    </Popover>
);

export default function AvatarDemo() {
    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', 'background-color': '#fde3cf' }} alt="Zank Lance">
                ZL
            </Avatar>
            <Avatar style={{ 'background-color': '#87d068' }} alt="Youself Zhang">
                YZ
            </Avatar>
        </AvatarGroup>
    );
}

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

LLCXRMZLYZ

代码

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

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', 'background-color': '#fde3cf' }} alt="Zank Lance">
                        ZL
                    </Avatar>
                    <Avatar style={{ 'background-color': '#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', 'background-color': '#fde3cf' }} alt="Zank Lance">
                        ZL
                    </Avatar>
                    <Avatar style={{ 'background-color': '#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`、`class` 和 `style`；`text` 为文字，或返回自定义内容的函数（标记显示时才调用）；传入 `render` 时完全由它渲染。	`Type`	-
children	头像内的文字或自定义内容。	`JSX.Element`	-
color	头像的预设背景颜色。	`AvatarColor`	`"grey"`
contentMotion	启用头像内容区域的动画。	`boolean`	-
gap	字符内容与头像左右两侧的间距，单位为像素。	`number`	`3`
hoverMask	鼠标悬停时显示的覆盖层内容，覆盖层没有默认样式。	`JSX.Element`	-
imgAttr	传给内部 `img` 元素的原生属性。	`Type`	-
onError	图片加载失败时调用，不传事件参数。返回 `false` 时保留损坏的图片，不切换为文字回退。	`Type`	-
shape	头像形状，可选 `circle` 或 `square`。	`AvatarShape`	`"circle"`
size	头像尺寸，支持预设名称或合法 CSS 尺寸。	`string`	`"medium"`
src	图片头像的资源地址。	`string`	-
srcSet	图片头像的响应式资源集合。	`string`	-
topSlot	顶部标记配置，包含 `text`、`gradientStart`、`gradientEnd`、`textColor`、`class` 和 `style`；`text` 为文字，或返回自定义内容的函数（标记显示时才调用）；传入 `render` 时完全由它渲染。	`Type`	-

class、style、ref 与原生属性落在头像的根元素上；使用 border、topSlot 或 bottomSlot 时，外层包裹元素接收 style，class、ref 与原生属性仍落在内部头像元素上。可点击头像的 tabindex、aria-* 落在内部唯一的焦点元素上。

AvatarGroup

Props

属性	说明	类型	默认值
children	组内的 Avatar。	`JSX.Element`	-
maxCount	显示的最大头像数，超出后显示 `+N`。	`number`	-
overlapFrom	头像重叠方向，可选 `start` 或 `end`。	`AvatarGroupOverlapFrom`	`"start"`
renderMore	自定义溢出标签。调用时传入剩余数量和被隐藏头像的渲染函数数组，返回的内容替代默认的 `+N`。被隐藏的头像在调用渲染函数处才创建，传入的属性覆盖头像自身的属性。	`Type`	-
shape	组内头像的形状。	`AvatarGroupShape`	`"circle"`
size	组内头像的尺寸。	`string`	`"medium"`

class、style、ref 与原生属性（包括 aria-*）落在 AvatarGroup 根元素上，不会传给组内的头像。

Accessibility

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

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

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

替代文本描述头像内容，避免空字符串，也不必重复说明「图片」。可点击时用 onClick 声明操作，组件自动提供 Tab 停靠点，并将 Enter 和空格转为点击。

设计变量

下表是组件内部的 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	超大尺寸头像的圆角