examples.md•10.7 kB
## Avatar 组件示例
### 基本
头像有三种尺寸，两种形状可选。
```tsx
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" size={16}>
<Space wrap size={16}>
<Avatar size={64} icon={<UserOutlined />} />
<Avatar size="large" icon={<UserOutlined />} />
<Avatar icon={<UserOutlined />} />
<Avatar size="small" icon={<UserOutlined />} />
<Avatar size={14} icon={<UserOutlined />} />
</Space>
<Space wrap size={16}>
<Avatar shape="square" size={64} icon={<UserOutlined />} />
<Avatar shape="square" size="large" icon={<UserOutlined />} />
<Avatar shape="square" icon={<UserOutlined />} />
<Avatar shape="square" size="small" icon={<UserOutlined />} />
<Avatar shape="square" size={14} icon={<UserOutlined />} />
</Space>
</Space>
);
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 = () => (
<Space size={16} wrap>
<Avatar icon={<UserOutlined />} />
<Avatar>U</Avatar>
<Avatar size={40}>USER</Avatar>
<Avatar src={url} />
<Avatar src={<img draggable={false} src={url} alt="avatar" />} />
<Avatar style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>U</Avatar>
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
</Space>
);
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 (
<>
<Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large" gap={gap}>
{user}
</Avatar>
<Button
size="small"
style={{ margin: '0 16px', verticalAlign: 'middle' }}
onClick={changeUser}
>
ChangeUser
</Button>
<Button size="small" style={{ verticalAlign: 'middle' }} onClick={changeGap}>
changeGap
</Button>
</>
);
};
export default App;
```
### 带徽标的头像
通常用于消息提示。
```tsx
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Badge, Space } from 'antd';
const App: React.FC = () => (
<Space size={24}>
<Badge count={1}>
<Avatar shape="square" icon={<UserOutlined />} />
</Badge>
<Badge dot>
<Avatar shape="square" icon={<UserOutlined />} />
</Badge>
</Space>
);
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 = () => (
<>
<Avatar.Group>
<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
<a href="https://ant.design">
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
</a>
<Tooltip title="Ant User" placement="top">
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
</Tooltip>
<Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />
</Avatar.Group>
<Divider />
<Avatar.Group
max={{
count: 2,
style: { color: '#f56a00', backgroundColor: '#fde3cf' },
}}
>
<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
<Tooltip title="Ant User" placement="top">
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
</Tooltip>
<Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />
</Avatar.Group>
<Divider />
<Avatar.Group
size="large"
max={{
count: 2,
style: { color: '#f56a00', backgroundColor: '#fde3cf' },
}}
>
<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=3" />
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
<Tooltip title="Ant User" placement="top">
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
</Tooltip>
<Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />
</Avatar.Group>
<Divider />
<Avatar.Group
size="large"
max={{
count: 2,
style: { color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' },
popover: { trigger: 'click' },
}}
>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
<Tooltip title="Ant User" placement="top">
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
</Tooltip>
<Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />
</Avatar.Group>
<Divider />
<Avatar.Group shape="square">
<Avatar style={{ backgroundColor: '#fde3cf' }}>A</Avatar>
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
<Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />
</Avatar.Group>
</>
);
export default App;
```
### 隐藏情况下计算字符对齐
切换 Avatar 显示的时候，文本样式应该居中并正确调整字体大小。
```tsx
import React, { useState } from 'react';
import { Avatar, Button, Space } from 'antd';
type SizeType = 'large' | 'small' | 'default' | number;
const App: React.FC = () => {
const [hide, setHide] = useState(true);
const [size, setSize] = useState<SizeType>('large');
const [scale, setScale] = useState(1);
const toggle = () => {
setHide(!hide);
};
const toggleSize = () => {
const sizes = ['small', 'default', '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 (
<>
<Space wrap>
<Button onClick={toggle}>Toggle Avatar visibility</Button>
<Button onClick={toggleSize}>Toggle Avatar size</Button>
<Button onClick={changeScale}>Change Avatar scale</Button>
</Space>
<div style={{ textAlign: 'center', transform: `scale(${scale})`, marginTop: 24 }}>
<Avatar size={size} style={{ background: '#7265e6', display: hide ? 'none' : '' }}>
Avatar
</Avatar>
<Avatar
size={size}
src="invalid"
style={{ background: '#00a2ae', display: hide ? 'none' : '' }}
>
Invalid
</Avatar>
<div style={{ display: hide ? 'none' : '' }}>
<Avatar size={size} style={{ background: '#7265e6' }}>
Avatar
</Avatar>
<Avatar size={size} src="invalid" style={{ background: '#00a2ae' }}>
Invalid
</Avatar>
</div>
</div>
</>
);
};
export default App;
```
### 响应式尺寸
头像大小可以根据屏幕大小自动调整。
```tsx
import React from 'react';
import { AntDesignOutlined } from '@ant-design/icons';
import { Avatar } from 'antd';
const App: React.FC = () => (
<Avatar
size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
icon={<AntDesignOutlined />}
/>
);
export default App;
```
### 图片不存在时
图片不存在时，如果 `src` 本身是个 ReactElement，会尝试回退到 `src`，否则尝试回退到 `icon`，最后回退到显示 `children`。
```tsx
import React from 'react';
import { Avatar, Space } from 'antd';
const App: React.FC = () => (
<Space>
<Avatar shape="circle" src="http://abc.com/not-exist.jpg">
A
</Avatar>
<Avatar shape="circle" src="http://abc.com/not-exist.jpg">
ABC
</Avatar>
</Space>
);
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 = () => (
<ConfigProvider
theme={{
components: {
Avatar: {
containerSize: 60,
containerSizeLG: 30,
containerSizeSM: 16,
textFontSize: 14,
textFontSizeLG: 14,
textFontSizeSM: 14,
iconFontSize: 18,
iconFontSizeLG: 28,
iconFontSizeSM: 12,
borderRadius: 10,
groupOverlapping: -10,
groupBorderColor: '#eee',
},
},
}}
>
<Space>
<Avatar shape="circle" src="http://abc.com/not-exist.jpg">
A
</Avatar>
</Space>
<Space>
<Avatar.Group
max={{
count: 2,
style: { color: '#f56a00', backgroundColor: '#fde3cf' },
}}
>
<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
<Tooltip title="Ant User" placement="top">
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
</Tooltip>
<Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
</Avatar.Group>
</Space>
<Space>
<Badge count={1}>
<Avatar shape="square" icon={<UserOutlined />} />
</Badge>
<Badge dot>
<Avatar shape="square" icon={<UserOutlined />} />
</Badge>
</Space>
</ConfigProvider>
);
export default App;
```