メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.2
Theme

リンクコンポーネント

最終更新日:

CSS のみの Tailwind CSS は、プライマリ、セカンダリ、アクセント、ニュートラル カラー バリエーションとリンクします。ホバー下線とプレーンスタイル。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

リンク コンポーネントは、視覚的な階層と意味論的な意味を持つアンカー要素をスタイルします。 Frutjam リンク システムは、Tailwind CSS ユーティリティ クラスを通じて、複数の色、ホバー効果、サイズ、装飾オプションをサポートします。テキスト リンク、ナビゲーション、CTA 要素に最適なリンクは、適切なフォーカス管理と下線の切り替えオプションによりアクセシビリティ基準を維持します。

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>