Avatar头像
用来代表用户或事物,支持图片、图标或字符展示。
设计师专属
安装 Kitchen Sketch 插件 💎,一键填充高逼格头像和文本.
代码演示
头像有三种尺寸,两种形状可选。
TypeScript
JavaScript
import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
ReactDOM.render(
<div>
<div>
<Avatar size={64} icon={<UserOutlined />} />
<Avatar size="large" icon={<UserOutlined />} />
<Avatar icon={<UserOutlined />} />
<Avatar size="small" icon={<UserOutlined />} />
</div>
<div>
<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 />} />
</div>
</div>,
mountNode,
);
对于字符型的头像,当字符串较长时,字体大小可以根据头像宽度自动调整。
TypeScript
JavaScript
import React, { useState } from 'react';
import { Avatar, Button } from 'antd';
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
const Autoset: React.FC = () => {
const [user, setUser] = useState(UserList[0]);
const [color, setColor] = useState(ColorList[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]);
};
return (
<div>
<Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large">
{user}
</Avatar>
<Button size="small" style={{ marginLeft: 16, verticalAlign: 'middle' }} onClick={changeUser}>
Change
</Button>
</div>
);
};
ReactDOM.render(<Autoset />, mountNode);
支持三种类型:图片、Icon 以及字符,其中 Icon 和字符型可以自定义图标颜色及背景色。
TypeScript
JavaScript
import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
ReactDOM.render(
<div>
<Avatar icon={<UserOutlined />} />
<Avatar>U</Avatar>
<Avatar>USER</Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
</div>,
mountNode,
);
通常用于消息提示。
TypeScript
JavaScript
import { Avatar, Badge } from 'antd';
import { UserOutlined } from '@ant-design/icons';
ReactDOM.render(
<div>
<span className="avatar-item">
<Badge count={1}>
<Avatar shape="square" icon={<UserOutlined />} />
</Badge>
</span>
<span>
<Badge dot>
<Avatar shape="square" icon={<UserOutlined />} />
</Badge>
</span>
</div>,
mountNode,
);
/* tile uploaded pictures */
.avatar-item {
margin-right: 24px;
}
[class*='-col-rtl'] .avatar-item {
margin-right: 0;
margin-left: 24px;
}
API
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
icon | 设置头像的自定义图标 | ReactNode | - | |
shape | 指定头像的形状 | circle | square | circle | |
size | 设置头像的大小 | number | large | small | default | default | |
src | 图片类头像的资源地址 | string | - | |
srcSet | 设置图片类头像响应式资源地址 | string | - | |
alt | 图像无法显示时的替代文本 | string | - | |
onError | 图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |