Avatar 头像

显示用户头像图片、缩写、图标或占位符图形，带状态指示器。

引入

import { Avatar } from 'asterui'

示例

基本用法

使用 src 属性的简单头像。

</>

import { Avatar } from 'asterui'

function App() {
  return (
      <Avatar
        src="/avatar-1.webp"
        alt="User avatar"
      />
    )
}

export default App

尺寸

使用 size 属性控制头像大小。

</>

import { Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" align="center">
        <Avatar size="xs" src="/avatar-1.webp" />
        <Avatar size="sm" src="/avatar-1.webp" />
        <Avatar size="md" src="/avatar-1.webp" />
        <Avatar size="lg" src="/avatar-1.webp" />
        <Avatar size="xl" src="/avatar-1.webp" />
      </Space>
    )
}

export default App

形状

圆形或方形头像。

</>

import { Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm">
        <Avatar shape="circle" src="/avatar-1.webp" />
        <Avatar shape="square" src="/avatar-1.webp" />
      </Space>
    )
}

export default App

状态指示器

显示在线或离线状态。

</>

import { Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm">
        <Avatar status="online" src="/avatar-1.webp" />
        <Avatar status="offline" src="/avatar-1.webp" />
      </Space>
    )
}

export default App

文本头像

显示缩写或文本内容。

</>

AI

JD

MX

import { Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" align="center">
        <Avatar size="xl">
          <span className="text-3xl">AI</span>
        </Avatar>
        <Avatar size="lg">
          <span className="text-xl">JD</span>
        </Avatar>
        <Avatar size="md">
          <span>MX</span>
        </Avatar>
      </Space>
    )
}

export default App

图标头像

显示图标而不是图片。

</>

import { Avatar, Space } from 'asterui'
import { UserIcon, UserCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" size="sm">
        <Avatar icon={<UserIcon size={32} />} />
        <Avatar size="lg" icon={<UserCircleIcon size={40} />} />
      </Space>
    )
}

export default App

头像组

使用重叠效果组合多个头像。

</>

import { Avatar } from 'asterui'

function App() {
  return (
      <Avatar.Group>
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
      </Avatar.Group>
    )
}

export default App

带最大数量的头像组

超过最大数量时显示溢出计数。

</>

+3

import { Avatar } from 'asterui'

function App() {
  return (
      <Avatar.Group max={3}>
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
      </Avatar.Group>
    )
}

export default App

API

Avatar

属性	描述	类型	默认值
src	图片源 URL	string	-
alt	图片替代文本	string	'avatar'
icon	要显示的图标元素	ReactNode	-
children	文本内容（如缩写）或自定义内容	ReactNode	-
size	头像大小	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
shape	头像形状	'circle' | 'square'	'circle'
status	在线状态指示器	'online' | 'offline'	-
className	额外的 CSS 类名	string	-
style	内联样式	CSSProperties	-

Avatar.Group

属性	描述	类型	默认值
children	多个 Avatar 组件	ReactNode	-
max	显示 +N 溢出前的最大头像数	number	-
size	组内所有头像的大小	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
className	额外的 CSS 类名	string	-
style	内联样式	CSSProperties	-

无障碍

• 图片有供屏幕阅读器使用的 alt 文本
• 状态指示器使用颜色和位置来提高可见性
• 文本头像可被屏幕阅读器读取