链接组件
最后更新:
仅 CSS Tailwind CSS 链接主要颜色、次要颜色、强调色和中性颜色变体。将鼠标悬停在下划线和普通样式上。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
具有视觉层次结构和语义的链接组件样式锚元素。 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 | 颜色 | 错误语义颜色 |
基本用法
<a class="link">Link</a> |
<a className="link">Link</a> |
链接颜色
应用语义链接颜色来匹配您的主题或传达含义（例如使用 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> |
链接悬停状态
默认情况下，您可以选择隐藏下划线并仅在悬停时显示它。这是更简洁的导航菜单和仪表板侧边栏的常见设计模式。
html
<a class="link link-hover">Hover this link</a> |