集成头像 UI 组件

用户或实体的视觉表示，通常用于用户界面中来代表一个人。

安装

您可以通过 Tiptap CLI（适用于 Vite 或 Next.js）添加这个原始组件

npx @tiptap/cli add avatar

手动集成

对于 Vite 或 Next.js 以外的框架，可以从开源代码库手动添加该组件。

导入样式

此组件要求您导入我们的样式，这些样式已添加到 styles/keyframe-animation.scss 和 styles/_variables.scss 中。

用法

import { Avatar, AvatarFallback, AvatarImage } from '@/components/tiptap-ui-primitive/avatar'

export default function MyComponent() {
  return (
    <Avatar>
      <AvatarImage src="https://via.placeholder.com/150" alt="用户头像" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  )
}

头像组

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from '@/components/tiptap-ui-primitive/avatar'

export default function MyComponent() {
  return (
    <AvatarGroup maxVisible={3}>
      <Avatar>
        <AvatarImage src="/avatars/user1.png" alt="用户 1" />
        <AvatarFallback>U1</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/avatars/user2.png" alt="用户 2" />
        <AvatarFallback>U2</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/avatars/user3.png" alt="用户 3" />
        <AvatarFallback>U3</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/avatars/user4.png" alt="用户 4" />
        <AvatarFallback>U4</AvatarFallback>
      </Avatar>
    </AvatarGroup>
  )
}

属性

头像

名称	类型	默认值	描述
size	'default' \| 'sm' \| 'lg'	'default'	头像大小

头像图片

名称	类型	默认值	描述
src	string	必需	图片源 URL
alt	string	必需	屏幕阅读器的替代文本

头像后备

名称	类型	默认值	描述
delayMs	number	0	显示后备内容之前的延迟（毫秒）

头像组

名称	类型	默认值	描述
maxVisible	number	未定义	在折叠之前显示的最大头像数量