LabelBadge

Jedna etykieta w kolorze, który wybrał dla niej projekt. Przekaż onRemove tam, gdzie etykiety są edytowane.

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

frontendbackendno colourdocumentation for the public interface

frontendaccessibilityperformancesearch

frontendbackendno colourdocumentation for the public interface

frontendaccessibilityperformancesearch

frontendbackendno colourdocumentation for the public interface

frontendaccessibilityperformancesearch

tsx

import { LabelBadge } from '@skribly/ui/tracker'

tsx

<LabelBadge color={label.color} onRemove={() => remove(label)} removeLabel={t('labels.remove', { name: label.name })}>
  {label.name}
</LabelBadge>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

Kolor wypełnia tylko kropkę ukrytą przed czytnikami ekranu; tekst leży na neutralnej powierzchni, więc każdy kolor projektu zachowuje czytelność.
Przycisk usuwania ma 24 px, jest nazwany przez removeLabel i ma widoczną obwódkę fokusa.
Długie nazwy są ucinane, z pełną nazwą w title.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.