Odznaka

Odznaka opakowuje coś i przypina znacznik do górnego rogu: nieprzeczytane wiadomości na przycisku skrzynki, kropkę „online” na awatarze. Jako dzieci przyjmuje to, co oznacza.

Podstawowa odznaka

4AL12

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

Kolory

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

Maksimum

Licznik powyżej max renderuje się jako n+, więc odznaka nigdy nie urośnie na tyle, żeby rozchwiać rzecz, na której siedzi.

999+250

stack({ direction: 'row', gap: 'xl', align: 'center', wrap: true },
  badge({ content: 9 }, button({ variant: 'soft', color: 'neutral' }, 'Dziewięć')),
  badge({ content: 250 }, button({ variant: 'soft', color: 'neutral' }, 'Ucięte na 99')),
  badge({ content: 250, max: 999 }, button({ variant: 'soft', color: 'neutral' }, 'max: 999')),
)

Kropka

Kropka mówi „coś się zmieniło”, nie mówiąc ile. Daj jej label — goła kropka nic nie znaczy dla czytnika ekranu, więc bez etykiety jest całkiem ukrywana przed drzewem dostępności.

stack({ direction: 'row', gap: 'xl', align: 'center' },
  badge({ dot: true, color: 'success', label: 'Online' }, avatar({ name: 'Ada Lovelace' })),
  badge({ dot: true, color: 'warning', label: 'Wymaga uwagi' },
    iconButton({
      label: 'Ustawienia',
      variant: 'soft',
      color: 'neutral',
      icon: icon('settings'),
    }),
  ),
)

Nazwanie licznika

Goła liczba jest poza kontekstem niejednoznaczna. label staje się dostępną nazwą odznaki, więc czyta się ją jako „4 nieprzeczytane wiadomości”, a nie „4”.

badge({ content: 4, label: '4 nieprzeczytane wiadomości' },
  button({ variant: 'soft', color: 'neutral' }, 'Skrzynka'),
)

Zmiana licznika

Licznik to liczba na stronie, która najpewniej zmieni się, gdy strona jest otwarta. setBadge() ogranicza ją do max tak samo jak robił to serwer, niesie ze sobą odczytywany tekst i wypuszcza opróżnioną odznakę z drzewa dostępności — tak właśnie odznaka znika.

Odczytywany tekst to treść Twojej witryny, więc podawaj go zawsze, gdy odznaka go ma:

button({ onclick: "import('/su/badge.js').then(m=>m.set('inbox',0))" }, 'Oznacz wszystko jako przeczytane')

Albo z własnego modułu, gdy już jakiś działa:

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

setBadge('inbox', 7, { label: '7 nieprzeczytanych wiadomości' })

Propsy

Prop	Typ	Domyślnie	Opis
`content`	`string \| number`	—	Co pokazuje odznaka. Ignorowane, gdy ustawiono dot.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'danger'`	Kolor odznaki.
`dot`	`boolean`	`false`	Mała kropka zamiast wartości.
`max`	`number`	`99`	Liczniki powyżej tej wartości renderują się jako n+.
`label`	`string`	—	Dostępna nazwa samej odznaki.