头像

查看源代码

头像组件用于表示用户，显示个人资料图片、首字母或备用内容。

导入

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarIndicator,
  AvatarGroup,
} from "@resolid/react-ui";
  • Avatar: 头像组件的根容器。
  • AvatarImage: 代表用户的图片。
  • AvatarFallback: 一个包装器，其内容在图像未能加载时显示。
  • AvatarIndicator: 一个包装器，其内容显示为头像的装饰。
  • AvatarGroup: 一个用于将多个头像堆叠在一起的包装器。

演示

import { Avatar, AvatarImage, AvatarFallback } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row justify-center gap-6"}>
      <Avatar name={"Alex Suprun"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa007.png"} />
        <AvatarFallback />
      </Avatar>
    </div>
  );
}

举例

大小

使用 size 属性来改变头像的大小

import { Avatar, AvatarImage, AvatarFallback } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row items-center justify-center gap-6"}>
      <Avatar size={72} name={"Alex Suprun"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa001.jpg"} />
        <AvatarFallback />
      </Avatar>
      <Avatar name={"Alex Suprun"} className={"bg-blue-100"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa006.png"} />
        <AvatarFallback />
      </Avatar>
      <Avatar size={"3rem"} name={"Alex Suprun"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa003.jpg"} />
        <AvatarFallback />
      </Avatar>
      <Avatar size={36} name={"Alex Suprun"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa004.jpg"} />
        <AvatarFallback />
      </Avatar>
    </div>
  );
}

圆角

使用 radius 属性来改变头像的圆角大小

import { Avatar, AvatarFallback, AvatarImage } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row items-center justify-center gap-6"}>
      <Avatar radius={false} name={"Alex Suprun"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa001.jpg"} />
        <AvatarFallback />
      </Avatar>
      <Avatar radius={12} name={"Alex Suprun"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa001.jpg"} />
        <AvatarFallback />
      </Avatar>
      <Avatar name={"Alex Suprun"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa001.jpg"} />
        <AvatarFallback />
      </Avatar>
    </div>
  );
}

备用

使用 fallback 属性并使用 AvatarFallback 组件包裹可以在头像图片不可用的时候显示备用头像, 默认使用 name 属性来生成字母显示的头像, 如果 name 未定义使用系统默认的头像

import { Avatar, AvatarFallback, AvatarImage } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row items-center justify-center gap-6"}>
      <Avatar name={"Alex Suprun"}>
        <AvatarImage />
        <AvatarFallback />
      </Avatar>
      <Avatar name={"Linh Le"}>
        <AvatarImage />
        <AvatarFallback />
      </Avatar>
      <Avatar>
        <AvatarImage />
        <AvatarFallback />
      </Avatar>
      <Avatar className={"bg-bg-normal"}>
        <AvatarImage />
        <AvatarFallback>
          <svg className={"h-full w-full"} viewBox="0 0 24 24">
            <path
              fill="#4678eb"
              d="M12 0a2.4 2.4 0 0 0-2.4 2.4v8.4c0 1.324 1.074 2.398 2.4 2.398s2.4-1.074 2.4-2.398V5.21a7.2 7.2 0 0 1 4.799 6.789 7.2 7.2 0 1 1-12.29-5.09 2.4 2.4 0 1 0-3.396-3.396A11.98 11.98 0 0 0 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0"
            />
          </svg>
        </AvatarFallback>
      </Avatar>
    </div>
  );
}

指示器

使用 indicator 属性并使用 AvatarIndicator 组件包裹可以在头像图片上显示一个绝对定位的指示器, 通常用于显示状态或通知。

solaris
import { Avatar, AvatarFallback, AvatarImage, AvatarIndicator } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row items-center justify-center gap-6"}>
      <Avatar name={"Alex Suprun"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa001.jpg"} />
        <AvatarFallback />
        <AvatarIndicator>
          <span
            className={"border-bg-subtlest bg-bg-success-emphasis h-5 w-5 rounded-full border-4"}
          />
        </AvatarIndicator>
      </Avatar>
      <Avatar name={"Alex Suprun"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa007.png"} />
        <AvatarFallback />
        <AvatarIndicator position={"bottom"}>
          <svg viewBox={"0 0 28 28"} className={"h-6 w-6"}>
            <path
              fill="#fff"
              d="m18.343 3.515-2.222-2.222a3 3 0 0 0-4.242 0L9.657 3.515H6.515a3 3 0 0 0-3 3v3.142l-2.222 2.222a3 3 0 0 0 0 4.242l2.222 2.222v3.142a3 3 0 0 0 3 3h3.142l2.222 2.222a3 3 0 0 0 4.242 0l2.222-2.222h3.142a3 3 0 0 0 3-3v-3.142l2.222-2.222a3 3 0 0 0 0-4.242l-2.222-2.222V6.515a3 3 0 0 0-3-3h-3.142Zm-1.121 1.707a1 1 0 0 0 .707.293h3.556a1 1 0 0 1 1 1v3.556a1 1 0 0 0 .293.707l2.515 2.515a1 1 0 0 1 0 1.414l-2.515 2.515a1 1 0 0 0-.293.707v3.556a1 1 0 0 1-1 1H17.93a1 1 0 0 0-.707.293l-2.515 2.515a1 1 0 0 1-1.414 0l-2.515-2.515a1 1 0 0 0-.707-.293H6.515a1 1 0 0 1-1-1V17.93a1 1 0 0 0-.293-.707l-2.515-2.515a1 1 0 0 1 0-1.414l2.515-2.515a1 1 0 0 0 .293-.707V6.515a1 1 0 0 1 1-1h3.556a1 1 0 0 0 .707-.293l2.515-2.515a1 1 0 0 1 1.414 0l2.515 2.515Z"
            />
            <path
              fill="#47c2ff"
              d="M17.929 5.515a1 1 0 0 1-.707-.293l-2.515-2.515a1 1 0 0 0-1.414 0l-2.515 2.515a1 1 0 0 1-.707.293H6.515a1 1 0 0 0-1 1v3.556a1 1 0 0 1-.293.707l-2.515 2.515a1 1 0 0 0 0 1.414l2.515 2.515a1 1 0 0 1 .293.707v3.556a1 1 0 0 0 1 1h3.556a1 1 0 0 1 .707.293l2.515 2.515a1 1 0 0 0 1.414 0l2.515-2.515a1 1 0 0 1 .707-.293h3.556a1 1 0 0 0 1-1V17.93a1 1 0 0 1 .293-.707l2.515-2.515a1 1 0 0 0 0-1.414l-2.515-2.515a1 1 0 0 1-.293-.707V6.515a1 1 0 0 0-1-1H17.93Z"
            />
            <path
              fill="#fff"
              d="m19.374 11.374-6.707 6.707-3.374-3.374 1.414-1.414 1.96 1.96 5.292-5.293 1.415 1.414Z"
            />
          </svg>
        </AvatarIndicator>
      </Avatar>
      <Avatar name={"Alex Suprun"}>
        <AvatarImage />
        <AvatarFallback />
        <AvatarIndicator position={"bottom"}>
          <span
            className={"border-bg-subtlest bg-bg-danger-emphasis h-5 w-5 rounded-full border-4"}
          />
        </AvatarIndicator>
      </Avatar>
      <Avatar className={"bg-blue-100"} name={"Alex Suprun"}>
        <AvatarImage src={"https://file.resolid.tech/images%2Fa006.png"} />
        <AvatarFallback />
        <AvatarIndicator>
          <img
            className={"h-6 w-6 rounded-full border-2 border-white"}
            alt={"solaris"}
            src={"https://file.resolid.tech/images/solaris.svg"}
          />
        </AvatarIndicator>
      </Avatar>
    </div>
  );
}

头像组

使用 AvatarGroup 组件将多个头像组合在一起

import { Avatar, AvatarImage, AvatarFallback, AvatarGroup } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-col items-center justify-center gap-3"}>
      <AvatarGroup size={50} spacing={"-0.75rem"}>
        <Avatar name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa001.jpg"} />
          <AvatarFallback />
        </Avatar>
        <Avatar name={"Alex Suprun"}>
          <AvatarImage />
          <AvatarFallback />
        </Avatar>
        <Avatar className={"bg-blue-100"} name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa006.png"} />
          <AvatarFallback />
        </Avatar>
        <Avatar name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa003.jpg"} />
          <AvatarFallback />
        </Avatar>
        <Avatar name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa007.png"} />
          <AvatarFallback />
        </Avatar>
        <Avatar>
          <AvatarImage />
          <AvatarFallback className={"bg-bg-subtlest"}>+3</AvatarFallback>
        </Avatar>
      </AvatarGroup>
      <AvatarGroup
        className={"rounded-full border-4 border-blue-100 bg-blue-100"}
        size={39}
        spacing={"-0.75rem"}
      >
        <Avatar name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa001.jpg"} />
          <AvatarFallback />
        </Avatar>
        <Avatar name={"Alex Suprun"}>
          <AvatarImage />
          <AvatarFallback />
        </Avatar>
        <Avatar className={"bg-blue-100"} name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa006.png"} />
          <AvatarFallback />
        </Avatar>
        <Avatar name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa003.jpg"} />
          <AvatarFallback />
        </Avatar>
        <Avatar name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa007.png"} />
          <AvatarFallback />
        </Avatar>
        <Avatar>
          <AvatarImage />
          <AvatarFallback className={"bg-blue-100"}>+3</AvatarFallback>
        </Avatar>
      </AvatarGroup>
    </div>
  );
}

头像组溢出

这个示例是如何通过组合 DropdownMenu 组件来处理头像组的溢出。

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
  DropdownMenu,
  DropdownMenuArrow,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-col items-center justify-center gap-3"}>
      <AvatarGroup
        className={"rounded-full border-4 border-blue-100 bg-blue-100"}
        size={39}
        spacing={"-0.75rem"}
      >
        <Avatar name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa001.jpg"} />
          <AvatarFallback />
        </Avatar>
        <Avatar name={"Alex Suprun"}>
          <AvatarImage />
          <AvatarFallback />
        </Avatar>
        <Avatar className={"bg-blue-100"} name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa006.png"} />
          <AvatarFallback />
        </Avatar>
        <Avatar name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa003.jpg"} />
          <AvatarFallback />
        </Avatar>
        <Avatar name={"Alex Suprun"}>
          <AvatarImage src={"https://file.resolid.tech/images%2Fa007.png"} />
          <AvatarFallback />
        </Avatar>
        <DropdownMenu placement={"bottom"}>
          <DropdownMenuTrigger render={(props) => <Avatar {...props} />}>
            <AvatarImage />
            <AvatarFallback className={"bg-blue-100"}>+3</AvatarFallback>
          </DropdownMenuTrigger>
          <DropdownMenuContent className={"text-sm"}>
            <DropdownMenuArrow />
            <DropdownMenuItem className={"gap-2"}>
              <Avatar size={32} name={"Alex Suprun"}>
                <AvatarImage src={"https://file.resolid.tech/images%2Fa004.jpg"} />
                <AvatarFallback />
              </Avatar>
              Hilda Surrey
            </DropdownMenuItem>
            <DropdownMenuItem className={"gap-2"}>
              <Avatar size={32} name={"Alex Suprun"}>
                <AvatarImage src={"https://file.resolid.tech/images%2Fa002.jpg"} />
                <AvatarFallback />
              </Avatar>
              Valentina Juliana
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </AvatarGroup>
    </div>
  );
}

属性

Avatar

属性name简介

头像的人名

类型string默认值-必须false
属性size简介

头像大小

类型string | number默认值64必须false
属性radius简介

头像圆角

类型number | boolean | "full"默认值"full"必须false

Image

AvatarImage 组件支持 HTML img 标签的属性

属性src简介

头像图片的 URL

类型string默认值-必须false

Fallback

属性delay简介

显示图像回退之前的延迟（以毫秒为单位）

类型number默认值200必须false

Indicator

属性position简介

指示器相对于头像的位置

类型"top" | "bottom"默认值"top"必须false

AvatarGroup

属性size简介

头像大小

类型string | number默认值64必须false
属性radius简介

头像圆角

类型number | boolean | "full"默认值"full"必须false
属性spacing简介

头像之间的空间

类型string默认值"-1rem"必须false

建议更改此页面