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.
具有視覺層次結構和語意的連結元件樣式錨元素。 Frutjam 連結系統透過 Tailwind CSS 實用程式類別支援多種顏色、懸停效果、尺寸和裝飾選項。連結非常適合文字連結、導航和號召性用語元素，透過適當的焦點管理和下劃線切換選項來保持可訪問性標準。
僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
| 班級 | 類型 | 描述 |
|---|---|---|
| link | 根據 | 帶有底線和顏色的樣式錨 |
| link-hover | 風格 | 下劃線僅在懸停時可見 |
| link-xs | 尺寸 | 特小號 |
| link-sm | 尺寸 | 小的 |
| link-md | 尺寸 | 中（預設） |
| link-lg | 尺寸 | 大的 |
| link-xl | 尺寸 | 特大號 |
| link-2xl | 尺寸 | 2×特大號 |
| link-primary | 顏色 | 主要主題顏色 |
| link-secondary | 顏色 | 次要主題色 |
| link-accent | 顏色 | 強調主題顏色 |
| link-neutral | 顏色 | 中性主題色 |
| link-info | 顏色 | 訊息語意顏色 |
| link-success | 顏色 | 成功語意色 |
| link-warning | 顏色 | 警告語意顏色 |
| link-error | 顏色 | 錯誤語意顏色 |
基本用法
連結顏色
應用語意連結顏色來配合您的主題或傳達意義（例如使用 link-error 進行破壞性操作或使用 link-success 進行確認）。
html
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> |
連結尺寸
縮放超連結以配合周圍的版式。這些實用程式類別的範圍從用於頁腳「合法」文字的超小到用於高影響力英雄部分的 2 倍大。
html
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> |
連結懸停狀態
預設情況下，您可以選擇隱藏下劃線並僅在懸停時顯示它。這是更簡潔的導覽選單和儀表板側邊欄的常見設計模式。