Avatar

Afficher des images de profil utilisateur, des initiales, des icônes ou des graphiques de substitution avec indicateurs de statut.

Importation

import { Avatar } from 'asterui'

Exemples

Avatar basique

Avatar simple avec image utilisant la prop src.

</>

import { Avatar } from 'asterui'

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

export default App

Tailles

Contrôler la taille de l'avatar avec la prop 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

Formes

Avatars cercle ou carré.

</>

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

Indicateurs de statut

Afficher la présence en ligne ou hors ligne.

</>

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

Avatars texte

Afficher des initiales ou du contenu texte.

</>

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

Avatars icône

Afficher des icônes au lieu d'images.

</>

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

Groupe d'avatars

Grouper plusieurs avatars avec chevauchement.

</>

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

Groupe d'avatars avec nombre maximal

Afficher le nombre de dépassement lorsque le maximum est dépassé.

</>

+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

Propriété	Description	Type	Défaut
src	URL de la source de l’image	string	-
alt	Texte alternatif de l’image	string	'avatar'
icon	Élément icône à afficher	ReactNode	-
children	Contenu texte (par ex. initiales) ou contenu personnalisé	ReactNode	-
size	Taille de l’avatar	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
shape	Forme de l’avatar	'circle' | 'square'	'circle'
status	Indicateur de statut de présence	'online' | 'offline'	-
className	Classes CSS supplémentaires	string	-
style	Styles inline	CSSProperties	-

Avatar.Group

Propriété	Description	Type	Défaut
children	Plusieurs composants Avatar	ReactNode	-
max	Nombre maximum d’avatars à afficher avant débordement +N	number	-
size	Taille pour tous les avatars du groupe	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
className	Classes CSS supplémentaires	string	-
style	Styles inline	CSSProperties	-

Accessibilité

• Les images ont un texte alt pour les lecteurs d’écran
• Les indicateurs de statut utilisent la couleur et la position pour la visibilité
• Les avatars texte sont lisibles par les lecteurs d’écran