Kropkowy wskaźnik stanu CSS Tailwind tylko dla CSS z wariantami kolorów podstawowego, sukcesu, ostrzeżenia i błędu. Rozmiary xs-xl. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Komponenty stanu wyświetlają bieżący stan lub dostępność użytkowników, systemów lub procesów za pomocą wskaźników wizualnych. Zbudowane w oparciu o semantyczny kod HTML i stylizację oznaczoną kolorami, plakietki stanu przekazują ważne informacje o stanie. System statusu Frutjam obsługuje wiele kolorów i rozmiarów — idealnie sprawdza się w przypadku obecności użytkownika, stanu systemu i stanów przepływu pracy.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
|---|---|---|
| status | Opierać | Mała kropka wskazująca stan lub obecność |
| status-xs | Rozmiar | Bardzo mały |
| status-sm | Rozmiar | Mały |
| status-md | Rozmiar | Średni (domyślny) |
| status-lg | Rozmiar | Duży |
| status-xl | Rozmiar | Bardzo duży |
| status-primary | Kolor | Podstawowy kolor motywu |
| status-secondary | Kolor | Kolor motywu drugorzędnego |
| status-accent | Kolor | Kolor motywu akcentującego |
| status-neutral | Kolor | Neutralny kolor motywu |
| status-info | Kolor | Kolor semantyczny informacji |
| status-success | Kolor | Sukces semantyczny kolor |
| status-warning | Kolor | Ostrzeżenie kolor semantyczny |
| status-error | Kolor | Błąd koloru semantycznego |
Podstawowe użycie
<span class="status"></span> |
<span className="status"></span> |
Kolory stanu
1 2 3 4 5 6 7 8 | <span class="status status-primary"></span> <span class="status status-secondary"></span> <span class="status status-accent"></span> <span class="status status-neutral"></span> <span class="status status-info"></span> <span class="status status-success"></span> <span class="status status-warning"></span> <span class="status status-error"></span> |
Rozmiary stanu
1 2 3 4 | <span class="status status-xs status-success"></span> <span class="status status-sm status-success"></span> <span class="status status-md status-success"></span> <span class="status status-lg status-success"></span> |
Stan z etykietą
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="flex items-center gap-2"> <span class="status status-md status-success"></span> <span>Online</span> </div> <div class="flex items-center gap-2"> <span class="status status-md status-neutral"></span> <span>Offline</span> </div> <div class="flex items-center gap-2"> <span class="status status-md status-error"></span> <span>Busy</span> </div> <div class="flex items-center gap-2"> <span class="status status-md status-warning"></span> <span>Away</span> </div> |
Stan z animacją pingowania
<div class="status status-error animate-ping"></div> |
Stan z animacją odbijania
1 2 3 4 | <div class="flex items-center gap-2"> <div class="status status-info animate-bounce"></div> <span>Unread emails</span> </div> |
Stan na liście użytkowników
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="space-y-2"> <div class="flex items-center gap-2"> <div class="avatar avatar-online"> U1 </div> <span>John (Online)</span> </div> <div class="flex items-center gap-2"> <div class="avatar avatar-offline"> U2 </div> <span>Jane (Offline)</span> </div> <div class="flex items-center gap-2"> <div class="avatar avatar-busy"> U3 </div> <span>Bob (Busy)</span> </div> </div> |
Używasz kodu Claude'a, kursora lub innego edytora AI?
Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Status. Żadnych więcej zajęć z halucynacjami.