## Avatar 组件示例
### 基本
头像有三种尺寸，两种形状可选。
```tsx
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Space } from 'antd';
const App: React.FC = () => (
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
);
export default App;
```
### 类型
支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
```tsx
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Space } from 'antd';
const url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';
const App: React.FC = () => (
} />
U
USER
} />
U
} />
);
export default App;
```
### 自动调整字符大小
对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。也可使用 `gap` 来设置字符距离左右两侧边界单位像素。
```tsx
import React, { useState } from 'react';
import { Avatar, Button } from 'antd';
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
const GapList = [4, 3, 2, 1];
const App: React.FC = () => {
const [user, setUser] = useState(UserList[0]);
const [color, setColor] = useState(ColorList[0]);
const [gap, setGap] = useState(GapList[0]);
const changeUser = () => {
const index = UserList.indexOf(user);
setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]);
setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);
};
const changeGap = () => {
const index = GapList.indexOf(gap);
setGap(index < GapList.length - 1 ? GapList[index + 1] : GapList[0]);
};
return (
<>
{user}
);
};
export default App;
```
### 带徽标的头像
通常用于消息提示。
```tsx
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Badge, Space } from 'antd';
const App: React.FC = () => (
} />
} />
);
export default App;
```
### Avatar.Group
头像组合展现。
```tsx
import React from 'react';
import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Divider, Tooltip } from 'antd';
const App: React.FC = () => (
<>
K
} />
} />
K
} />
} />
K
} />
} />
K
} />
} />
A
K
} />
} />
);
export default App;
```
### 隐藏情况下计算字符对齐
切换 Avatar 显示的时候，文本样式应该居中并正确调整字体大小。
```tsx
import React, { useState } from 'react';
import { Avatar, Button, Space } from 'antd';
type SizeType = 'large' | 'small' | 'medium' | number;
const App: React.FC = () => {
const [hide, setHide] = useState(true);
const [size, setSize] = useState('large');
const [scale, setScale] = useState(1);
const toggle = () => {
setHide(!hide);
};
const toggleSize = () => {
const sizes = ['small', 'medium', 'large'] as SizeType[];
let current = sizes.indexOf(size) + 1;
if (current > 2) {
current = 0;
}
setSize(sizes[current]);
};
const changeScale = () => {
setScale(scale === 1 ? 2 : 1);
};
return (
<>
);
};
export default App;
```
### 响应式尺寸
头像大小可以根据屏幕大小自动调整。
```tsx
import React from 'react';
import { AntDesignOutlined } from '@ant-design/icons';
import { Avatar } from 'antd';
const App: React.FC = () => (
}
/>
);
export default App;
```
### 图片不存在时
图片不存在时，如果 `src` 本身是个 ReactElement，会尝试回退到 `src`，否则尝试回退到 `icon`，最后回退到显示 `children`。
```tsx
import React from 'react';
import { Avatar, Space } from 'antd';
const App: React.FC = () => (
A
ABC
);
export default App;
```
### 组件 Token
Component Token Debug.
```tsx
import React from 'react';
import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Badge, ConfigProvider, Space, Tooltip } from 'antd';
const App: React.FC = () => (
A
K
} />
} />
} />
} />
);
export default App;
```