Avatar
维护者：
DakEnviy
size
theme
view
imgUrl
fallbackImgUrl
sizes
srcSet
alt
icon
text
backgroundColor
borderColor
color
title
import {Avatar} from '@gravity-ui/uikit';
该组件用于渲染头像。它有三种基本头像类型：图像、图标和文本（姓名首字母）。所有这些类型都有特殊属性来配置行为和外观。
类型
图像
该组件可用于使用图像渲染头像。要提供图像，请使用 imgUrl 属性。
<Avatar imgUrl="https://loremflickr.com/640/480/cats?lock=8610182282084352" size="l" />您还可以提供 srcSet 属性来加载不同大小的图像。
<Avatar imgUrl="https://loremflickr.com/640/480/cats?lock=8610182282084352" srcSet="https://loremflickr.com/57/43/cats?lock=2879400393572352 1x, https://loremflickr.com/131/98/cats?lock=4373954936438784 2x, https://loremflickr.com/164/123/cats?lock=3007328513163264 3x, https://loremflickr.com/225/169/cats?lock=8243879964835840 4x" size="l" />Avatar 组件有 fallbackImgUrl 属性，当通过 imgUrl 链接加载图像出错时（CSP 错误或没有原始图像），允许您提供显示的图像。
<Avatar imgUrl="random_link" fallbackImgUrl="https://loremflickr.com/640/480/cats?lock=3552647338524672" size="l" />图标
该组件可用于使用图标渲染头像。使用 icon 属性提供图标，就像在 Icon 组件中一样。
import {GraduationCap} from '@gravity-ui/icons';
<Avatar icon={GraduationCap} size="l" />文本
该组件可用于使用文本渲染头像。为此使用 text 属性。文本显示为首字母缩写（两个单词的首字母）或单个单词的前两个字母。
CD
GU
<Avatar text="Charles Darwin" size="l" />
<Avatar text="Guardian" size="l" />外观
主题和视图
Avatar 组件有预定义的主题（normal、brand）和视图（filled、outlined）。
默认主题是 normal，默认视图是 filled。
import {GraduationCap} from '@gravity-ui/icons';
<Avatar icon={GraduationCap} size="l" theme="normal" view="filled" />
<Avatar icon={GraduationCap} size="l" theme="brand" view="filled" />
<Avatar icon={GraduationCap} size="l" theme="normal" view="outlined" />
<Avatar icon={GraduationCap} size="l" theme="brand" view="outlined" />自定义颜色
您还可以通过 backgroundColor、borderColor 和 color 属性提供自定义颜色（后者仅适用于图标和文本头像）。这些颜色的优先级高于主题颜色。
CD
CD
<Avatar text="Charles Darwin" size="l" backgroundColor="var(--g-color-base-danger-medium)" color="var(--g-color-text-primary)" />
<Avatar text="Charles Darwin" size="l" borderColor="var(--g-color-line-misc)" />尺寸
使用 size 属性管理 Avatar 大小。默认大小为 m。可能的值为 3xs、2xs、xs、s、m、l 和 xl。
C
CD
CD
CD
CD
CD
CD
<Avatar text="Charles Darwin" theme="brand" size="3xs" />
<Avatar text="Charles Darwin" theme="brand" size="2xs" />
<Avatar text="Charles Darwin" theme="brand" size="xs" />
<Avatar text="Charles Darwin" theme="brand" size="s" />
<Avatar text="Charles Darwin" theme="brand" size="m" />
<Avatar text="Charles Darwin" theme="brand" size="l" />
<Avatar text="Charles Darwin" theme="brand" size="xl" />属性
通用
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| size | 头像大小 | '3xs' '2xs' 'xs' 's' 'm' 'l' 'xl' | m |
| theme | 头像主题 | 'normal' 'brand' | normal |
| view | 头像填充和轮廓选项 | 'filled' 'outlined' | filled |
| backgroundColor | 自定义背景颜色 | string | |
| borderColor | 自定义边框颜色 | string | |
| title | HTML 属性 title | string | |
| aria-label | 头像部分的 aria-label | string | |
| aria-labelledby | 头像部分的 aria-labelledby | string | |
| aria-describedby | 头像块的 aria-describedby | string | |
| aria-details | 头像块的 aria-details | string | |
| className | 根元素的自定义 CSS 类 | string | |
| style | HTML 属性 style | React.CSSProperties | |
| qa | HTML 属性 data-qa，用于测试 | string |
图像特定
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| imgUrl | img 的 HTML 属性 src | string | |
| fallbackImgUrl | 发生错误时显示的备用图像 | string | |
| sizes | img 的 HTML 属性 sizes | string | |
| srcSet | img 的 HTML 属性 srcSet | string | |
| alt | img 的 HTML 属性 alt | string | props.title |
| loading | img 的 HTML 属性 loading | 'eager' 'lazy' |
图标特定
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| icon | SVG 图标源 | IconData | |
| color | 自定义图标颜色 | string |
文本特定
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| text | 头像文本 | string | |
| color | 自定义文本颜色 | string |
CSS API
| 名称 | 描述 |
|---|---|
--g-avatar-size | 大小（宽度和高度） |
--g-avatar-border-width | 边框宽度 |
--g-avatar-inner-border-width | 内边框宽度 |
--g-avatar-border-color | 边框颜色 |
--g-avatar-background-color | 背景颜色 |
--g-avatar-text-color | 图标和文本颜色 |
--g-avatar-font-weight | 文本字体粗细 |
--g-avatar-font-size | 文本字体大小 |
--g-avatar-line-height | 文本行高 |