跳到主要内容

文档

Link

定义不同的样式,让链接融入特定的内容。

Muted 修饰符

Base 组件决定了默认的链接颜色。如果希望链接改用弱化样式,只需为锚点元素添加 .uk-link-muted 类。你也可以把该类添加到父元素上,它会作用于其中所有的 <a> 元素。

<a class="uk-link-muted" href="#"></a>
Link
<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>

Text 修饰符

要让链接看起来像正文,并在悬停时产生效果,请为锚点元素添加 .uk-link-text 类。你也可以把该类添加到父元素上,它会作用于其中所有的 <a> 元素。这适用于页面页脚中的链接列表。

<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>

Heading 修饰符

要为标题元素中的链接设置样式,请为锚点元素添加 .uk-link-heading 类。

<h3><a class="uk-link-heading" href="#"></a></h3>

Heading

<h3><a class="uk-link-heading" href="#">Heading</a></h3>

Reset 修饰符

要重置链接的颜色,使其继承父元素的颜色,请添加 .uk-link-reset 类。此时完全不会有悬停效果。这适用于标题元素内部的链接。你也可以把该类添加到父元素上,它会作用于其中所有的 <a> 元素。

Link

Heading

<a class="uk-link-reset" href="#">Link</a>

<h3><a class="uk-link-reset" href="#">Heading</a></h3>

Toggle

要把锚点作为父元素、并对其某个子元素应用链接样式,只需为父元素添加 .uk-link-toggle 类,并为子元素添加某个 .uk-link-* 类。例如,你可以让整张卡片都可点击,同时让悬停效果作用在标题上。

<a class="uk-link-toggle" href="#">
    <span class="uk-link-heading"></span>
</a>

Heading

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>