Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Składnik stanu

Ostatnia aktualizacja:

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
statusOpieraćMała kropka wskazująca stan lub obecność
status-xsRozmiarBardzo mały
status-smRozmiarMały
status-mdRozmiarŚredni (domyślny)
status-lgRozmiarDuży
status-xlRozmiarBardzo duży
status-primaryKolorPodstawowy kolor motywu
status-secondaryKolorKolor motywu drugorzędnego
status-accentKolorKolor motywu akcentującego
status-neutralKolorNeutralny kolor motywu
status-infoKolorKolor semantyczny informacji
status-successKolorSukces semantyczny kolor
status-warningKolorOstrzeżenie kolor semantyczny
status-errorKolorBłąd koloru semantycznego

Podstawowe użycie

<span class="status"></span>

<span className="status"></span>

Kolory stanu

html 
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

html 
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ą

Online
Offline
Busy
Away
html 
 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

html 
<div class="status status-error animate-ping"></div>

Stan z animacją odbijania

Unread emails
html 
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

U1
John (Online)
U2
Jane (Offline)
U3
Bob (Busy)
html 
 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.

Try Cherry MCP