Avatar

Bir avatara name verip src vermezseniz, bozuk bir görsel yerine baş harfleri işler. Yalnızca bazı kişilerin fotoğrafı olan bir katkıcı listesi için işe yarayan yedek budur.

Temel avatar

ALGHAT

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

Görselle birlikte

src ayarlandığında alt ada geri düşer — böylece bir avatar hiçbir zaman etiketsiz bir görsel olmaz.

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

Boyutlar

Yazı boyutu avatarla birlikte ölçeklenir, böylece baş harfler orantılı kalır.

KBOBBB

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Küçük Biri', size: 'sm' }),
  avatar({ name: 'Orta Biri', size: 'md' }),
  avatar({ name: 'Büyük Biri', size: 'lg' }),
)

Kare

PAPB

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

Renkler

Görseli olmayan bir avatar yumuşak bir palet zemini alır.

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

Simgeler ve başka içerik

Çocuklar, bir simge ya da tek bir karakter için baş harfleri geçersiz kılar.

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

Gruplar

avatarGroup() çocuklarını üst üste bindirir ve max değerini aşan her şeyi bir sayıya indirir.

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

Bir listede

AL
Ada Lovelace
main dalına 3 işleme gönderdi
GH
Grace Hopper
Bir çekme isteği açtı

list(
  listItem({
    start: avatar({ name: 'Ada Lovelace', size: 'sm' }),
    title: 'Ada Lovelace',
    description: 'main dalına 3 işleme gönderdi',
  }),
  listItem({
    start: avatar({ name: 'Grace Hopper', size: 'sm', color: 'success' }),
    title: 'Grace Hopper',
    description: 'Bir çekme isteği açtı',
  }),
)

Proplar

Prop	Tür	Varsayılan	Açıklama
`name`	`string`	—	Baş harfler, başlık ve görsel alt yedeği için kullanılır.
`src`	`string`	—	Baş harfler yerine gösterilecek görsel.
`alt`	`string`	—	Görsel alt metni; ada geri düşer.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Çap ve baş harflerin yazı boyutu.
`square`	`boolean`	`false`	Daire yerine yuvarlatılmış dikdörtgen.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Baş harf zemini için palet.

avatarGroup() şunları alır: max — gerisini bir sayıya indirmeden önce kaç tanesinin gösterileceği — ve yalnızca o sayı için kullanılan size.