• 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://joesch.moe/api/v1/random" size="mini" />
<Avatar src="https://joesch.moe/api/v1/random" size="small" />
<Avatar src="https://joesch.moe/api/v1/random" size="medium" />
<Avatar src="https://joesch.moe/api/v1/random" size="large" />

形状

通过 variant 属性来设置形状。

<Avatar src="https://joesch.moe/api/v1/random" />
<Avatar src="https://joesch.moe/api/v1/random" shape="square" />
<Avatar src="https://joesch.moe/api/v1/random" shape="rounded" />

群组

最多显示5个。

<Avatar.Group total={24}>
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
</Avatar.Group>

最大

通过 max 属性最大可展示数量,最多显示5个。

<Avatar.Group max={3}>
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/api/v1/random" />
  <Avatar src="https://joesch.moe/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://joesch.moe/api/v1/random" />
</Badge>
<Badge
  className="avatar-avatar"
  content={<Avatar src="https://joesch.moe/api/v1/random" />}
  position="bottom-right"
>
  <Avatar src="https://joesch.moe/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 circlestringcircle
size大小，可选值为 mini small medium largestringmedium

Avatar.Group Props

参数说明类型默认值
shape形状，可选值为 square rounded circlestringcircle
spacing间距，可选值为 small medium largestringmedium
limit显示的最大头像个数number-
total头像总数。用于计算额外头像的数量。string-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值描述
—avatar-colorvar(—white)-
—avatar-background-colorvar(—gray-5)-
—avatar-border-colorvar(—white)-
—avatar-border-width2PX-
—avatar-font-weightvar(—font-weight-bold)-
—avatar-font-familyRoboto, Helvetica, Arial, sans-serif-
—avatar-font-size-minivar(—avatar-font-size, var(—font-size-xs))-
—avatar-font-size-smallvar(—avatar-font-size, var(—font-size-sm))-
—avatar-font-size-mediumvar(—avatar-font-size, var(—font-size-md))-
—avatar-font-size-largevar(—avatar-font-size, var(—font-size-lg))-
—avatar-border-radius-minivar(—avatar-border-radius, 2px * $hd)-
—avatar-border-radius-smallvar(—avatar-border-radius, 4px * $hd)-
—avatar-border-radius-mediumvar(—avatar-border-radius, 5px * $hd)-
—avatar-border-radius-largevar(—avatar-border-radius, 6px * $hd)-
—avatar-size-minivar(—avatar-size, 16px * $hd)-
—avatar-size-smallvar(—avatar-size, 26px * $hd)-
—avatar-size-mediumvar(—avatar-size, 38px * $hd)-
—avatar-size-largevar(—avatar-size, 56px * $hd)-
—avatar-spacing-minivar(—avatar-spacing, var(—padding-xs))-
—avatar-spacing-smallvar(—avatar-spacing, var(—padding-sm))-
—avatar-spacing-mediumvar(—avatar-spacing, var(—padding-md))-
—avatar-spacing-largevar(—avatar-spacing, var(—padding-lg))-