Avatar 头像
用来代表用户或事物,支持图片、图标或字符展示。
代码演示
基本
头像有三种尺寸,两种形状可选。
import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar } from 'choerodon-ui';
ReactDOM.render(
<div>
<div>
<span style={{ marginRight: 10 }}>
<Avatar size={64} icon="person" />
</span>
<span style={{ marginRight: 10 }}>
<Avatar size="large" icon="person" />
</span>
<span style={{ marginRight: 10 }}>
<Avatar icon="person" />
</span>
<Avatar size="small" icon="person" />
</div>
<div>
<span style={{ marginRight: 10 }}>
<Avatar shape="square" size={64} icon="person" />
</span>
<span style={{ marginRight: 10 }}>
<Avatar shape="square" size="large" icon="person" />
</span>
<span style={{ marginRight: 10 }}>
<Avatar shape="square" icon="person" />
</span>
<Avatar shape="square" size="small" icon="person" />
</div>
</div>,
document.getElementById('container'),
);
类型
支持三种类型:图片、Icon 以及字符,其中 Icon 和字符型可以自定义图标颜色及背景色。
import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar } from 'choerodon-ui';
ReactDOM.render(
<div>
<span style={{ marginRight: 10 }}>
<Avatar icon="person" />
</span>
<span style={{ marginRight: 10 }}>
<Avatar>U</Avatar>
</span>
<span style={{ marginRight: 10 }}>
<Avatar>USER</Avatar>
</span>
<span style={{ marginRight: 10 }}>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
</span>
<span style={{ marginRight: 10 }}>
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
U
</Avatar>
</span>
<Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
</div>,
document.getElementById('container'),
);
自动调整字符大小
对于字符型的头像,当字符串较长时,字体大小可以根据头像宽度自动调整。
import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar, Button } from 'choerodon-ui';
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
class Autoset extends React.Component {
constructor(props) {
super(props);
this.state = {
user: UserList[0],
color: colorList[0],
};
}
changeUser = () => {
const index = UserList.indexOf(this.state.user);
this.setState({
user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0],
color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
});
}
render() {
return (
<div>
<Avatar style={{ backgroundColor: this.state.color, verticalAlign: 'middle' }} size="large">
{this.state.user}
带徽标的头像
通常用于消息提示。
import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar, Badge } from 'choerodon-ui';
ReactDOM.render(
<div>
<span style={{ marginRight: 24 }}>
<Badge count={1}><Avatar shape="square" icon="person" /></Badge>
</span>
<span>
<Badge dot><Avatar shape="square" icon="person" /></Badge>
</span>
</div>,
document.getElementById('container'));
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
icon | 设置头像的图标类型,参考 Icon 组件 | string | - |
shape | 指定头像的形状 | Enum{ ‘circle’, ‘square’ } | circle |
size | 设置头像的大小 | Enum{ ‘large’, ‘small’, ‘default’ } | default |
src | 图片类头像的资源地址 | string | - |
alt | 图像无法显示时的替代文本 | string | - |
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .