Avatar

Dai a un avatar un name e nessun src e renderizzerà le iniziali invece di un’immagine rotta. È il ripiego utile per un elenco di contributori in cui solo alcuni hanno una foto.

Avatar di base

ALGHAT

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Ada Lovelace' }),
  avatar({ name: 'Grace Hopper' }),
  avatar({ name: 'Alan Turing' }),
)

Con un’immagine

Quando src è impostato, alt ripiega sul nome — così un avatar non è mai un’immagine senza etichetta.

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ src: '/logo.svg', alt: 'sitelo', style: 'background: var(--su-surface-2)' }),
  avatar({ src: '/logo.svg', name: 'sitelo', square: true, style: 'background: var(--su-surface-2)' }),
)

Dimensioni

La dimensione del carattere scala con l’avatar, così le iniziali restano proporzionate.

PUMUGU

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Piccolo Uno', size: 'sm' }),
  avatar({ name: 'Medio Uno', size: 'md' }),
  avatar({ name: 'Grande Uno', size: 'lg' }),
)

Quadrato

PAPB

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Progetto A', square: true }),
  avatar({ name: 'Progetto B', square: true, color: 'success' }),
)

Colori

Un avatar senza immagine prende uno sfondo dalla palette soft.

PNSWD

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  avatar({ name: 'Primary', color: 'primary' }),
  avatar({ name: 'Neutral', color: 'neutral' }),
  avatar({ name: 'Success', color: 'success' }),
  avatar({ name: 'Warning', color: 'warning' }),
  avatar({ name: 'Danger', color: 'danger' }),
)

Icone e altri contenuti

I figli scavalcano le iniziali, per un’icona o un singolo carattere.

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ color: 'neutral' },
    icon('user'),
  ),
  avatar({ color: 'primary' }, '?'),
)

Gruppi

avatarGroup() sovrappone i propri figli e comprime in un conteggio tutto ciò che supera max.

ALGHAT

ALGHAT+3

ALGH+1

stack({ gap: 'md' },
  avatarGroup(
    avatar({ name: 'Ada Lovelace' }),
    avatar({ name: 'Grace Hopper' }),
    avatar({ name: 'Alan Turing' }),
  ),
  avatarGroup({ max: 3 },
    avatar({ name: 'Ada Lovelace' }),
    avatar({ name: 'Grace Hopper' }),
    avatar({ name: 'Alan Turing' }),
    avatar({ name: 'Katherine Johnson' }),
    avatar({ name: 'Barbara Liskov' }),
    avatar({ name: 'Margaret Hamilton' }),
  ),
  avatarGroup({ max: 2, size: 'sm' },
    avatar({ name: 'Ada Lovelace', size: 'sm' }),
    avatar({ name: 'Grace Hopper', size: 'sm' }),
    avatar({ name: 'Alan Turing', size: 'sm' }),
  ),
)

In un elenco

AL
Ada Lovelace
Ha pubblicato 3 commit su main
GH
Grace Hopper
Ha aperto una pull request

list(
  listItem({
    start: avatar({ name: 'Ada Lovelace', size: 'sm' }),
    title: 'Ada Lovelace',
    description: 'Ha pubblicato 3 commit su main',
  }),
  listItem({
    start: avatar({ name: 'Grace Hopper', size: 'sm', color: 'success' }),
    title: 'Grace Hopper',
    description: 'Ha aperto una pull request',
  }),
)

Props

Prop	Tipo	Predefinito	Descrizione
`name`	`string`	—	Usato per le iniziali, il title e il ripiego dell’alt dell’immagine.
`src`	`string`	—	Immagine da mostrare al posto delle iniziali.
`alt`	`string`	—	Testo alternativo dell’immagine; ripiega su name.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Diametro, e dimensione del carattere delle iniziali.
`square`	`boolean`	`false`	Rettangolo arrotondato invece di un cerchio.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Palette per lo sfondo delle iniziali.

avatarGroup() accetta max — quanti mostrarne prima di comprimere il resto in un conteggio — e size, usata soltanto per quel conteggio.