Link CSS Tailwind obejmujący wyłącznie CSS z podstawowymi, dodatkowymi, akcentującymi i neutralnymi wariantami kolorów. Najedź kursorem na podkreślenie i gładkie style. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
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
<a class="link">Link</a> |
<a className="link">Link</a> |
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.
<a class="link link-hover">Hover this link</a> |
Używasz kodu Claude'a, kursora lub innego edytora AI?
Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Połączyć. Żadnych więcej zajęć z halucynacjami.