Komponenty odznak i tagów

Odznaki to małe, zwarte etykiety wizualne, które pozwalają szybko przekazać informacje o stanie, liczbie lub kategorii. Tagi to zazwyczaj etykiety dodawane przez użytkownika w celu filtrowania i klasyfikowania, natomiast odznaki stanu wskazują stan, taki jak Active, Pending lub Archived.

W Tailwind oba elementy buduje się za pomocą tej samej podstawowej struktury: niewielkiego odstępu wewnętrznego, promienia obramowania rounded-full lub rounded-md, koloru tła i małego tekstu. Cały komponent nie wymaga niestandardowego CSS.

Odznaki w kształcie pastylki używają rounded-full, aby uzyskać całkowicie zaokrąglone końce, nadające im charakterystyczny kształt odróżniający je od prostokątnych elementów. Standardowe podejście łączy delikatny odcień tła z ciemniejszym odcieniem tekstu z tej samej rodziny kolorów.

Na przykład bg-green-100 text-green-800 tworzy jasnozieloną odznakę, której treść pozostaje czytelna nawet przy małych rozmiarach. Użyj px-2.5 py-0.5 dla kompaktowego odstępu wewnętrznego oraz text-xs font-medium dla czytelnej etykiety.

W sytuacjach wymagających większego kontrastu odznaki w jednolitym kolorze używają w pełni nasyconego tła, takiego jak bg-blue-600, wraz z text-white. Dobrze sprawdzają się na ciemnych tłach lub wtedy, gdy odznaka powinna wyróżniać się wizualnie na tle innych elementów.

Odznaki w jednolitym kolorze są często używane do wyświetlania liczby powiadomień, etykiet wersji (takich jak New lub Beta) oraz oznaczeń kategorii przy flagach funkcji lub w dziennikach zmian.

Odznaka z liczbą powiadomień nachodzi na przycisk lub ikonę, aby pokazać liczbę nieprzeczytanych elementów. Umieść ją absolutnie względem elementu nadrzędnego, używając relative na kontenerze i absolute -top-1 -right-1 na odznace.

Użyj w-5 h-5 flex items-center justify-center, aby przy małych rozmiarach uzyskać idealnie okrągłą odznakę. Ukryj odznakę, gdy liczba wynosi zero, korzystając z renderowania warunkowego lub narzędzia hidden.

Odznaka punktowa przekazuje informację o stanie bez tekstu — jest po prostu małym kolorowym kółkiem. Połącz w-2.5 h-2.5 rounded-full z kolorem tła, aby utworzyć punkt, i umieść go obok tekstu za pomocą inline-flex items-center gap-1.5.

Wskaźniki punktowe idealnie nadają się do pokazywania obecności online/offline, stanu synchronizacji w czasie rzeczywistym lub środowiska, do którego należy rekord (produkcyjnego albo stagingowego).

Odznaka konturowa używa obramowania zamiast wypełnienia tłem: border border-blue-500 text-blue-600 z przezroczystym lub bardzo jasnym tłem. Tworzy to subtelną etykietę, która nie konkuruje z sąsiadującymi wypełnionymi elementami.

Dodaj bg-transparent (lub pomiń klasę bg-) i użyj ring-1 ring-inset ring-blue-500 jako alternatywnego rozwiązania zapewniającego większą kontrolę nad grubością obwódki.

Tagi filtrów często potrzebują przycisku usuwania (×), aby użytkownicy mogli je odrzucać. Zbuduj tag jako kontener inline-flex items-center gap-1 zawierający etykietę i mały przycisk z ikoną.

Przycisk usuwania używa ml-1 text-gray-500 hover:text-gray-900 oraz małego znaku ×, dzięki czemu można go łatwo kliknąć, a jednocześnie nie dominuje wizualnie. Ten wzorzec jest często stosowany w filtrach wyszukiwania, tagach umiejętności i polach wielokrotnego wyboru.

Dodanie małej ikony przed etykietą odznaki zapewnia kontekst wizualny bez konieczności odczytywania tekstu. Użyj inline-flex items-center gap-1 oraz SVG o rozmiarze w-3 h-3, aby zachować proporcje ikony względem tekstu odznaki.

Ikona znacznika wyboru na zielonej odznace, zegara na żółtej oraz ikona X na czerwonej przekazują informację o stanie zarówno za pomocą koloru, jak i kształtu.

Nie wszystkie odznaki muszą mieć całkowicie zaokrąglone rogi. Tag prostokątny z rounded-md zamiast rounded-full wygląda bardziej uporządkowanie i dobrze sprawdza się przy etykietach technologii, numerach wersji i znacznikach kategorii.

Ten styl często pojawia się w narzędziach dla deweloperów, serwisach z dokumentacją i dziennikach zmian, gdzie prostokątny kształt nawiązuje do stylu bloków kodu i etykiet technicznych.

Odznaki mają różne rozmiary zależnie od kontekstu. W wierszu tabeli danych odznaka bardzo mała (text-xs) pozwala zachować kompaktowy układ. Na stronie marketingowej większa pastylka (text-sm px-4 py-1) jest łatwiejsza do odczytania na pierwszy rzut oka.

Definiuj warianty rozmiarów, dostosowując wartości px-*, py-* i text-*. Unikaj bezwzględnych rozmiarów w pikselach — trzymaj się skali Tailwind, aby zachować spójność projektu.

Popularnym sposobem wskazywania treści aktualizowanych w czasie rzeczywistym lub transmitowanych na żywo jest pulsujący punkt. Użyj animate-ping na absolutnie pozycjonowanym elemencie span wewnątrz kontenera odznaki, aby utworzyć efekt rozchodzącej się fali przyciągający wzrok.

Umieść statyczny punkt nad animowanym: element span z animate-ping tworzy falę, a jego jednokolorowy element siostrzany w-2 h-2 rounded-full bg-red-600 zapewnia właściwy punkt. Oba elementy umieść w kontenerze relative.

W tej lekcji poznali Państwo: kształty odznak w formie pastylki i prostokąta zbudowane za pomocą rounded-full i rounded-md; kodowanie stanów kolorami, łączące jasne tła (odcień 100) z ciemnym tekstem (odcień 800) w ramach tego samego koloru; oraz specjalne wzorce odznak, takie jak liczniki powiadomień z pozycjonowaniem absolutnym, wskaźniki punktowe, przyciski usuwania tagów i animacja pulsowania na żywo z użyciem animate-ping. Następnie połączymy komponenty w kompletny interfejs.