Rozet

Bir rozet bir şeyi sarar ve üst köşesine bir işaret iliştirir: bir gelen kutusu düğmesindeki okunmamış iletiler, bir avatardaki çevrimiçi noktası. İşaretlediği şeyi çocuk olarak alır.

Temel rozet

4AL12

stack({ direction: 'row', gap: 'xl', align: 'center' },
  badge({ content: 4 }, button({ variant: 'soft', color: 'neutral' }, 'Gelen kutusu')),
  badge({ content: 12 }, avatar({ name: 'Ada Lovelace' })),
)

Renkler

33333

stack({ direction: 'row', gap: 'xl', align: 'center', wrap: true },
  badge({ content: 3, color: 'primary' }, button({ variant: 'soft', color: 'neutral' }, 'Primary')),
  badge({ content: 3, color: 'neutral' }, button({ variant: 'soft', color: 'neutral' }, 'Neutral')),
  badge({ content: 3, color: 'success' }, button({ variant: 'soft', color: 'neutral' }, 'Success')),
  badge({ content: 3, color: 'warning' }, button({ variant: 'soft', color: 'neutral' }, 'Warning')),
  badge({ content: 3, color: 'danger' }, button({ variant: 'soft', color: 'neutral' }, 'Danger')),
)

Üst sınır

max değerinin üstündeki bir sayı n+ olarak işlenir, böylece bir rozet hiçbir zaman üzerinde durduğu şeyin dengesini bozacak kadar genişlemez.

999+250

stack({ direction: 'row', gap: 'xl', align: 'center', wrap: true },
  badge({ content: 9 }, button({ variant: 'soft', color: 'neutral' }, 'Dokuz')),
  badge({ content: 250 }, button({ variant: 'soft', color: 'neutral' }, '99 ile sınırlı')),
  badge({ content: 250, max: 999 }, button({ variant: 'soft', color: 'neutral' }, 'max: 999')),
)

Nokta

Bir nokta, ne kadar olduğunu söylemeden “bir şey değişti” der. Ona bir label verin — çıplak bir nokta bir ekran okuyucu için hiçbir şey ifade etmez, bu yüzden etiketsizse erişilebilirlik ağacından tümüyle gizlenir.

stack({ direction: 'row', gap: 'xl', align: 'center' },
  badge({ dot: true, color: 'success', label: 'Çevrimiçi' }, avatar({ name: 'Ada Lovelace' })),
  badge({ dot: true, color: 'warning', label: 'İlgi gerekiyor' },
    iconButton({
      label: 'Ayarlar',
      variant: 'soft',
      color: 'neutral',
      icon: icon('settings'),
    }),
  ),
)

Sayıyı etiketlemek

Çıplak bir sayı bağlam dışında belirsizdir. label rozetin erişilebilir adı olur, böylece “4” yerine “4 okunmamış ileti” diye okunur.

badge({ content: 4, label: '4 okunmamış ileti' },
  button({ variant: 'soft', color: 'neutral' }, 'Gelen kutusu'),
)

Sayıyı değiştirmek

Bir sayı, sayfa açıkken değişmesi en olası sayıdır. setBadge() onu sunucunun yaptığı gibi max değerine sıkıştırır, duyurulan metni yanında tutar ve boşalan bir rozeti erişilebilirlik ağacından düşürür — bir rozet böyle kaybolur.

Duyurulan metin sitenin kendi metnidir, bu yüzden rozetin bir tanesi olduğunda onu geçirin:

button({ onclick: "import('/su/badge.js').then(m=>m.set('inbox',0))" }, 'Tümünü okundu işaretle')

Ya da zaten çalışan bir modülünüz varsa kendi modülünüzden:

import { setBadge } from 'sitelo/ui/client'

setBadge('inbox', 7, { label: '7 okunmamış ileti' })

Proplar

Prop	Tür	Varsayılan	Açıklama
`content`	`string \| number`	—	Rozetin gösterdiği şey. dot ayarlıyken yok sayılır.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'danger'`	Rozet rengi.
`dot`	`boolean`	`false`	Bir değer yerine küçük bir nokta.
`max`	`number`	`99`	Bunun üstündeki sayılar n+ olarak işlenir.
`label`	`string`	—	Rozetin kendisi için erişilebilir ad.