Przełącznik CSS Tailwind CSS z podstawowymi, dodatkowymi, akcentowanymi i semantycznymi wariantami kolorów. Rozmiary xs-xl. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Komponenty przełączające to przełączniki binarne, które umożliwiają użytkownikom włączanie i wyłączanie funkcji lub ustawień. Zbudowane z natywnych pól wyboru HTML i wzbogacone o animacje CSS Tailwind, przełączniki zapewniają intuicyjny sposób kontrolowania stanów logicznych. System przełączania Frutjam obsługuje wiele kolorów, rozmiarów i stanów wyłączonych — idealnie nadaje się do paneli ustawień, flag funkcji i elementów sterujących preferencjami.
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 |
|---|---|---|
| toggle | Opierać | Animowane wejście włącznika/wyłącznika |
| toggle-xs | Rozmiar | Bardzo mały |
| toggle-sm | Rozmiar | Mały |
| toggle-md | Rozmiar | Średni (domyślny) |
| toggle-lg | Rozmiar | Duży |
| toggle-xl | Rozmiar | Bardzo duży |
| toggle-primary | Kolor | Podstawowy kolor motywu |
| toggle-secondary | Kolor | Kolor motywu drugorzędnego |
| toggle-accent | Kolor | Kolor motywu akcentującego |
| toggle-neutral | Kolor | Neutralny kolor motywu |
| toggle-info | Kolor | Kolor semantyczny informacji |
| toggle-success | Kolor | Sukces semantyczny kolor |
| toggle-warning | Kolor | Ostrzeżenie kolor semantyczny |
| toggle-error | Kolor | Błąd koloru semantycznego |
Podstawowe użycie
1 2 | <input type="checkbox" class="toggle"> <input type="checkbox" class="toggle" checked> |
1 2 | <input type="checkbox" className="toggle"> <input type="checkbox" className="toggle" checked> |
Przełącz rozmiary
1 2 3 4 5 | <input type="checkbox" class="toggle toggle-xs"> <input type="checkbox" class="toggle toggle-sm"> <input type="checkbox" class="toggle toggle-md"> <input type="checkbox" class="toggle toggle-lg"> <input type="checkbox" class="toggle toggle-xl"> |
Przełącz kolory
1 2 3 4 5 6 7 8 | <input type="checkbox" class="toggle" checked> <input type="checkbox" class="toggle toggle-primary" checked> <input type="checkbox" class="toggle toggle-secondary" checked> <input type="checkbox" class="toggle toggle-accent" checked> <input type="checkbox" class="toggle toggle-info" checked> <input type="checkbox" class="toggle toggle-success" checked> <input type="checkbox" class="toggle toggle-warning" checked> <input type="checkbox" class="toggle toggle-error" checked> |
Wyłączony przełącznik
1 2 | <input type="checkbox" class="toggle" disabled> <input type="checkbox" class="toggle" disabled checked> |
Przełącz za pomocą etykiety
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-primary" checked> <span>Enable notifications</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-success" checked> <span>Dark mode</span> </label> <label class="flex items-center gap-2"> <input type="checkbox" class="toggle toggle-warning"> <span>Analytics</span> </label> |
Przełącz stany
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="flex gap-4 items-center"> <div> <p class="text-sm font-medium mb-2">Off</p> <input type="checkbox" class="toggle toggle-primary"> </div> <div> <p class="text-sm font-medium mb-2">On</p> <input type="checkbox" class="toggle toggle-primary" checked> </div> <div> <p class="text-sm font-medium mb-2">Disabled</p> <input type="checkbox" class="toggle toggle-primary" disabled> </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 Dźwignia kolankowa. Żadnych więcej zajęć z halucynacjami.