Avatar

Gib einem Avatar einen name und kein src, und er zeigt die Initialen statt eines kaputten Bildes. Das ist der nützliche Rückfall für eine Mitwirkendenliste, in der nur manche ein Foto haben.

Einfacher Avatar

ALGHAT

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

Mit Bild

Ist src gesetzt, fällt alt auf den Namen zurück — ein Avatar ist also nie ein unbeschriftetes Bild.

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)' }),
)

Größen

Die Schriftgröße skaliert mit dem Avatar, damit die Initialen im Verhältnis bleiben.

KEMEGE

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Klein Eins', size: 'sm' }),
  avatar({ name: 'Mittel Eins', size: 'md' }),
  avatar({ name: 'Groß Eins', size: 'lg' }),
)

Quadratisch

PAPB

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

Farben

Ein Avatar ohne Bild bekommt einen weichen Hintergrund aus der Palette.

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' }),
)

Icons und anderer Inhalt

Kinder überschreiben die Initialen — für ein Icon oder ein einzelnes Zeichen.

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

Gruppen

avatarGroup() überlappt seine Kinder und klappt alles jenseits von max zu einer Zahl zusammen.

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 einer Liste

AL
Ada Lovelace
3 Commits nach main gepusht
GH
Grace Hopper
Hat einen Pull Request eröffnet

list(
  listItem({
    start: avatar({ name: 'Ada Lovelace', size: 'sm' }),
    title: 'Ada Lovelace',
    description: '3 Commits nach main gepusht',
  }),
  listItem({
    start: avatar({ name: 'Grace Hopper', size: 'sm', color: 'success' }),
    title: 'Grace Hopper',
    description: 'Hat einen Pull Request eröffnet',
  }),
)

Props

Prop	Typ	Standard	Beschreibung
`name`	`string`	—	Wird für die Initialen, das title und als Alt-Rückfall des Bildes genutzt.
`src`	`string`	—	Bild, das statt der Initialen erscheint.
`alt`	`string`	—	Alt-Text des Bildes; fällt auf name zurück.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Durchmesser und Schriftgröße der Initialen.
`square`	`boolean`	`false`	Abgerundetes Rechteck statt Kreis.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Palette für den Hintergrund der Initialen.

avatarGroup() nimmt max — wie viele gezeigt werden, bevor der Rest zu einer Zahl zusammenklappt — und size, das nur für diese Zahl gilt.