Avatar 头像

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

代码演示

基本

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

Avatar头像 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Avatar } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <div>
  6. <div>
  7. <span style={{ marginRight: 10 }}>
  8. <Avatar size={64} icon="person" />
  9. </span>
  10. <span style={{ marginRight: 10 }}>
  11. <Avatar size="large" icon="person" />
  12. </span>
  13. <span style={{ marginRight: 10 }}>
  14. <Avatar icon="person" />
  15. </span>
  16. <Avatar size="small" icon="person" />
  17. </div>
  18. <div>
  19. <span style={{ marginRight: 10 }}>
  20. <Avatar shape="square" size={64} icon="person" />
  21. </span>
  22. <span style={{ marginRight: 10 }}>
  23. <Avatar shape="square" size="large" icon="person" />
  24. </span>
  25. <span style={{ marginRight: 10 }}>
  26. <Avatar shape="square" icon="person" />
  27. </span>
  28. <Avatar shape="square" size="small" icon="person" />
  29. </div>
  30. </div>,
  31. document.getElementById('container'),
  32. );

类型

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

Avatar头像 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Avatar } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <div>
  6. <span style={{ marginRight: 10 }}>
  7. <Avatar icon="person" />
  8. </span>
  9. <span style={{ marginRight: 10 }}>
  10. <Avatar>U</Avatar>
  11. </span>
  12. <span style={{ marginRight: 10 }}>
  13. <Avatar>USER</Avatar>
  14. </span>
  15. <span style={{ marginRight: 10 }}>
  16. <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  17. </span>
  18. <span style={{ marginRight: 10 }}>
  19. <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
  20. U
  21. </Avatar>
  22. </span>
  23. <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
  24. </div>,
  25. document.getElementById('container'),
  26. );

自动调整字符大小

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

Avatar头像 - 图3

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

带徽标的头像

通常用于消息提示。

Avatar头像 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Avatar, Badge } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <div>
  6. <span style={{ marginRight: 24 }}>
  7. <Badge count={1}><Avatar shape="square" icon="person" /></Badge>
  8. </span>
  9. <span>
  10. <Badge dot><Avatar shape="square" icon="person" /></Badge>
  11. </span>
  12. </div>,
  13. document.getElementById('container'));

API

参数说明类型默认值
icon设置头像的图标类型,参考 Icon 组件string-
shape指定头像的形状Enum{ ‘circle’, ‘square’ }circle
size设置头像的大小Enum{ ‘large’, ‘small’, ‘default’ }default
src图片类头像的资源地址string-
alt图像无法显示时的替代文本string-