Avatar头像

用来代表用户或事物,支持图片、图标或字符展示。

设计师专属

安装 Kitchen Sketch 插件 💎,一键填充高逼格头像和文本.

代码演示

Avatar头像 - 图1

基本

头像有三种尺寸,两种形状可选。

  1. import { Avatar } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <div>
  5. <Avatar size={64} icon="user" />
  6. <Avatar size="large" icon="user" />
  7. <Avatar icon="user" />
  8. <Avatar size="small" icon="user" />
  9. </div>
  10. <div>
  11. <Avatar shape="square" size={64} icon="user" />
  12. <Avatar shape="square" size="large" icon="user" />
  13. <Avatar shape="square" icon="user" />
  14. <Avatar shape="square" size="small" icon="user" />
  15. </div>
  16. </div>,
  17. mountNode,
  18. );

Avatar头像 - 图2

自动调整字符大小

对于字符型的头像,当字符串较长时,字体大小可以根据头像宽度自动调整。

  1. import { Avatar, Button } from 'antd';
  2. const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
  3. const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
  4. class Autoset extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. user: UserList[0],
  9. color: colorList[0],
  10. };
  11. }
  12. changeUser = () => {
  13. const index = UserList.indexOf(this.state.user);
  14. this.setState({
  15. user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0],
  16. color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
  17. });
  18. };
  19. render() {
  20. return (
  21. <div>
  22. <Avatar style={{ backgroundColor: this.state.color, verticalAlign: 'middle' }} size="large">
  23. {this.state.user}
  24. </Avatar>
  25. <Button
  26. size="small"
  27. style={{ marginLeft: 16, verticalAlign: 'middle' }}
  28. onClick={this.changeUser}
  29. >
  30. Change
  31. </Button>
  32. </div>
  33. );
  34. }
  35. }
  36. ReactDOM.render(<Autoset />, mountNode);

Avatar头像 - 图3

类型

支持三种类型:图片、Icon 以及字符,其中 Icon 和字符型可以自定义图标颜色及背景色。

  1. import { Avatar } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Avatar icon="user" />
  5. <Avatar>U</Avatar>
  6. <Avatar>USER</Avatar>
  7. <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  8. <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
  9. <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
  10. </div>,
  11. mountNode,
  12. );

Avatar头像 - 图4

带徽标的头像

通常用于消息提示。

  1. import { Avatar, Badge } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <span style={{ marginRight: 24 }}>
  5. <Badge count={1}>
  6. <Avatar shape="square" icon="user" />
  7. </Badge>
  8. </span>
  9. <span>
  10. <Badge dot>
  11. <Avatar shape="square" icon="user" />
  12. </Badge>
  13. </span>
  14. </div>,
  15. mountNode,
  16. );

API

参数说明类型默认值版本
icon设置头像的图标类型,参考 Icon 组件string-
shape指定头像的形状Enum{ 'circle', 'square' }circle
size设置头像的大小number | Enum{ 'large', 'small', 'default' }default
src图片类头像的资源地址string-
srcSet设置图片类头像响应式资源地址string-3.11.0
alt图像无法显示时的替代文本string-3.7.0
onError图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为() => boolean-3.8.0