设置 style
可以修改,背景颜色
<Avatar>P</Avatar>
<Avatar style={{ background: "green" }}>N</Avatar>
<Avatar style={{ background: "pink" }}>HP</Avatar>
设置 size
属性后,可以选择四个大小。
<Avatar src="https://joeschmoe.io/api/v1/random" size="mini" />
<Avatar src="https://joeschmoe.io/api/v1/random" size="small" />
<Avatar src="https://joeschmoe.io/api/v1/random" size="medium" />
<Avatar src="https://joeschmoe.io/api/v1/random" size="large" />
通过 variant
属性来设置形状。
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" shape="square" />
<Avatar src="https://joeschmoe.io/api/v1/random" shape="rounded" />
最多显示5个。
<Avatar.Group total={24}>
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Avatar.Group>
通过 max
属性最大可展示数量,最多显示5个。
<Avatar.Group max={3}>
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" />
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Avatar.Group>
<Avatar style={{ background: "red" }}>
<Cross />
</Avatar>
<Avatar style={{ background: "pink" }}>
<LocationOutlined />
</Avatar>
<Avatar style={{ background: "green" }}>
<SettingOutlined />
</Avatar>
<Badge className="avatar-dot" dot position="bottom-right">
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Badge>
<Badge
className="avatar-avatar"
content={<Avatar src="https://joeschmoe.io/api/v1/random" />}
position="bottom-right"
>
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Badge>
.avatar-dot {
bottom: 2px * 2;
right: 6px * 2,
}
.avatar-avatar {
--badge-background-color: transparent;
--badge-padding: 0;
--badge-size: 12px * 2;
--avatar-size: var(--badge-size);
bottom: 2px * 2;
right: 6px * 2,
}
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
src | 传入图片的链接,传入之后嵌套内容不展示 | string | - |
alt | 图片不显示时的文本内容 | string | - |
shape | 形状,可选值为 square rounded circle |
string | circle |
size | 大小,可选值为 mini small medium large |
string | medium |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
shape | 形状,可选值为 square rounded circle |
string | circle |
spacing | 间距,可选值为 small medium large |
string | medium |
limit | 显示的最大头像个数 | number | - |
total | 头像总数。用于计算额外头像的数量。 | string | - |
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
—avatar-color | var(—white) | - |
—avatar-background-color | var(—gray-5) | - |
—avatar-border-color | var(—white) | - |
—avatar-border-width | 2PX | - |
—avatar-font-weight | var(—font-weight-bold) | - |
—avatar-font-family | Roboto, Helvetica, Arial, sans-serif | - |
—avatar-font-size-mini | var(—avatar-font-size, var(—font-size-xs)) | - |
—avatar-font-size-small | var(—avatar-font-size, var(—font-size-sm)) | - |
—avatar-font-size-medium | var(—avatar-font-size, var(—font-size-md)) | - |
—avatar-font-size-large | var(—avatar-font-size, var(—font-size-lg)) | - |
—avatar-border-radius-mini | var(—avatar-border-radius, 2px * $hd) | - |
—avatar-border-radius-small | var(—avatar-border-radius, 4px * $hd) | - |
—avatar-border-radius-medium | var(—avatar-border-radius, 5px * $hd) | - |
—avatar-border-radius-large | var(—avatar-border-radius, 6px * $hd) | - |
—avatar-size-mini | var(—avatar-size, 16px * $hd) | - |
—avatar-size-small | var(—avatar-size, 26px * $hd) | - |
—avatar-size-medium | var(—avatar-size, 38px * $hd) | - |
—avatar-size-large | var(—avatar-size, 56px * $hd) | - |
—avatar-spacing-mini | var(—avatar-spacing, var(—padding-xs)) | - |
—avatar-spacing-small | var(—avatar-spacing, var(—padding-sm)) | - |
—avatar-spacing-medium | var(—avatar-spacing, var(—padding-md)) | - |
—avatar-spacing-large | var(—avatar-spacing, var(—padding-lg)) | - |