Avatar头像
用来代表用户或事物,支持图片、图标或字符展示。
代码演示
import { Avatar } from 'antd';
ReactDOM.render(
<div>
<div>
<Avatar size="large" icon="user" />
<Avatar icon="user" />
<Avatar size="small" icon="user" />
</div>
<div>
<Avatar shape="square" size="large" icon="user" />
<Avatar shape="square" icon="user" />
<Avatar shape="square" size="small" icon="user" />
</div>
</div>
, mountNode);
U
import { Avatar, Button } from 'antd';
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 }} size="large">{this.state.user}</Avatar>
<Button size="small" style={{ marginLeft: 16 }} onClick={this.changeUser}>Change</Button>
</div>
);
}
}
ReactDOM.render(<Autoset />
, mountNode);
UUSERU
import { Avatar } from 'antd';
ReactDOM.render(
<div>
<Avatar icon="user" />
<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="user" />
</div>
, mountNode);
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
import { Avatar, Badge } from 'antd';
ReactDOM.render(
<div>
<span style={{ marginRight: 24 }}>
<Badge count={1}><Avatar shape="square" icon="user" /></Badge>
</span>
<span>
<Badge dot><Avatar shape="square" icon="user" /></Badge>
</span>
</div>
, mountNode);
API#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
icon | 设置头像的图标类型,参考 Icon 组件 | string | - |
shape | 指定头像的形状 | Enum{ 'circle', 'square' } | circle |
size | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | default |
src | 图片类头像的资源地址 | string | - |