リンク
リンクを特定のコンテンツに統合するための異なるスタイルを定義します。
ミュート修飾子
`基本コンポーネント`は、デフォルトのリンクの色を決定します。リンクにミュートスタイルを適用する場合は、アンカー要素に`uk-link-muted`クラスを追加します。親要素にもクラスを追加でき、その中のすべての``要素に適用されます。
<a class="uk-link-muted" href="#"></a>- リンク
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<a class="uk-link-muted" href="#">Link</a> <p class="uk-link-muted">Lorem ipsum <a href="#">dolor sit</a> amet, consectetur adipiscing elit, sed do <a href="#">eiusmod</a> tempor incididunt ut <a href="#">labore et</a> dolore magna aliqua.</p>
テキスト修飾子
リンクを本文のように表示し、ホバー効果を適用するには、アンカー要素に`uk-link-text`クラスを追加します。親要素にもクラスを追加でき、その中のすべての``要素に適用されます。これは、ページフッターのリンクリストに役立ちます。
<a class="uk-link-text" href="#"></a><ul class="uk-list uk-link-text"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul>
見出し修飾子
見出し要素内のリンクのスタイルを設定するには、アンカー要素に`uk-link-heading`クラスを追加します。
<h3><a class="uk-link-heading" href="#"></a></h3>リセット修飾子
リンクの色をリセットして親から色を継承させるには、`uk-link-reset`クラスを追加します。ホバー効果はありません。これは、見出し要素内のリンクに役立ちます。親要素にもクラスを追加でき、その中のすべての``要素に適用されます。
- リンク
見出し
<a class="uk-link-reset" href="#">Link</a> <h3><a class="uk-link-reset" href="#">Heading</a></h3>
トグル
アンカーを親要素として使用し、子要素の1つにリンクスタイルを適用するには、親要素に`uk-link-toggle`クラス、子要素に`uk-link-*`クラスのいずれかを追加します。たとえば、カード全体をリンクしても、見出しにホバー効果を適用できます。
<a class="uk-link-toggle" href="#">
<span class="uk-link-heading"></span>
</a>-
見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<a href class="uk-display-block uk-card uk-card-body uk-card-default uk-link-toggle uk-width-medium"> <h3 class="uk-card-title"><span class="uk-link-heading">Heading</span></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </a>