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.
Bileşen stili bağlantı öğelerini görsel hiyerarşi ve anlamsal anlamla bağlayın. Frutjam bağlantı sistemi, Tailwind CSS yardımcı program sınıfları aracılığıyla birden fazla rengi, vurgulu efektleri, boyutları ve dekorasyon seçeneklerini destekler. Metin bağlantıları, gezinme ve harekete geçirici mesaj öğeleri için mükemmel olan bağlantılar, uygun odak yönetimi ve altı çizili geçiş seçenekleriyle erişilebilirlik standartlarını korur.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| link | Temel | Alt çizgi ve renk içeren stilize çapa |
| link-hover | Stil | Alt çizgi yalnızca fareyle üzerine gelindiğinde görünür |
| link-xs | Boyut | Ekstra küçük |
| link-sm | Boyut | Küçük |
| link-md | Boyut | Orta (varsayılan) |
| link-lg | Boyut | Büyük |
| link-xl | Boyut | Ekstra büyük |
| link-2xl | Boyut | 2× ekstra büyük |
| link-primary | Renk | Birincil tema rengi |
| link-secondary | Renk | İkincil tema rengi |
| link-accent | Renk | Vurgu teması rengi |
| link-neutral | Renk | Nötr tema rengi |
| link-info | Renk | Bilgi anlamsal rengi |
| link-success | Renk | Başarı anlamsal rengi |
| link-warning | Renk | Uyarı anlamsal rengi |
| link-error | Renk | Hata anlamsal rengi |
Temel Kullanım
Bağlantı Renkleri
Temanızla eşleştirmek veya anlamı iletmek için anlamsal bağlantı renkleri uygulayın (örneğin, yıkıcı eylemler için bağlantı hatası veya onay için bağlantı başarısı kullanmak).
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> |
Bağlantı Boyutları
Köprülerinizi çevredeki tipografiye uyacak şekilde ölçeklendirin. Bu yardımcı sınıflar, altbilgi "yasal" metni için ekstra küçükten, yüksek etkili kahraman bölümleri için 2 kat büyüğe kadar değişir.
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> |
Bağlantının Vurgu Durumu
Varsayılan olarak alt çizgiyi gizlemeyi ve yalnızca üzerine gelindiğinde ortaya çıkarmayı seçebilirsiniz. Bu, daha temiz gezinme menüleri ve kontrol paneli kenar çubukları için yaygın bir tasarım modelidir.