• Vant React

Avatar 头像

介绍

显示用户头像、首字母或备用图标。

引入

import { Avatar } from "@taroify/core"

代码演示

基础用法

设置 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,
}

API

Avatar Props

参数 说明 类型 默认值
src 传入图片的链接,传入之后嵌套内容不展示 string -
alt 图片不显示时的文本内容 string -
shape 形状，可选值为 square rounded circle string circle
size 大小，可选值为 mini small medium large string medium

Avatar.Group Props

参数 说明 类型 默认值
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)) -