Link Component
CSS-only Tailwind CSS link with primary, secondary, accent, and neutral color variants. Hover underline and plain styles. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Połącz elementy zakotwiczone w stylu komponentów z wizualną hierarchią i znaczeniem semantycznym. System łączy Frutjam obsługuje wiele kolorów, efektów najechania, rozmiarów i opcji dekoracji za pośrednictwem klas narzędzi CSS Tailwind. Idealne do linków tekstowych, elementów nawigacji i wezwań do działania, linki zachowują standardy dostępności dzięki odpowiedniemu zarządzaniu fokusem i opcjom przełączania podkreślenia.
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 |
|---|---|---|
| link | Opierać | Stylizowana kotwica z podkreśleniem i kolorem |
| link-hover | Styl | Podkreślenie widoczne tylko po najechaniu myszką |
| link-xs | Rozmiar | Bardzo mały |
| link-sm | Rozmiar | Mały |
| link-md | Rozmiar | Średni (domyślny) |
| link-lg | Rozmiar | Duży |
| link-xl | Rozmiar | Bardzo duży |
| link-2xl | Rozmiar | 2× bardzo duże |
| link-primary | Kolor | Podstawowy kolor motywu |
| link-secondary | Kolor | Kolor motywu drugorzędnego |
| link-accent | Kolor | Kolor motywu akcentującego |
| link-neutral | Kolor | Neutralny kolor motywu |
| link-info | Kolor | Kolor semantyczny informacji |
| link-success | Kolor | Sukces semantyczny kolor |
| link-warning | Kolor | Ostrzeżenie kolor semantyczny |
| link-error | Kolor | Błąd koloru semantycznego |
Podstawowe użycie
Kolory łączy
Zastosuj kolory linków semantycznych, aby pasowały do Twojego motywu lub aby przekazać znaczenie (np. użyj link-error do destrukcyjnych działań lub link-success do potwierdzenia).
1 2 3 4 5 6 7 8 | <a class="link link-primary">Primary link</a> <a class="link link-secondary">Secondary link</a> <a class="link link-accent">Accent link</a> <a class="link link-success">Success link</a> <a class="link link-info">Info link</a> <a class="link link-warning">Warning link</a> <a class="link link-error">Error link</a> <a class="link link-neutral">Neutral link</a> |
Rozmiary linków
Skaluj hiperłącza, aby dopasować je do otaczającej typografii. Te klasy użyteczności obejmują bardzo małe „legalne” teksty w stopce lub 2X duże w przypadku sekcji bohaterów o dużym wpływie.
1 2 3 4 5 6 | <a class="link link-xs">Primary link</a> <a class="link link-sm">Secondary link</a> <a class="link link-md">Accent link</a> <a class="link link-lg">Success link</a> <a class="link link-xl">Info link</a> <a class="link link-2xl">Warning link</a> |
Stan najechania łącza
Domyślnie możesz ukryć podkreślenie i odsłonić je dopiero po najechaniu kursorem. Jest to powszechny wzorzec projektowy przejrzystych menu nawigacyjnych i pasków bocznych pulpitu nawigacyjnego.