定义不同的样式,让链接融入特定的内容。
Base 组件决定了默认的链接颜色。如果希望链接改用弱化样式,只需为锚点元素添加 .uk-link-muted 类。你也可以把该类添加到父元素上,它会作用于其中所有的 <a> 元素。
<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> 元素。这适用于页面页脚中的链接列表。
<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> 元素。
<a class="uk-link-reset" href="#">Link</a>
<h3><a class="uk-link-reset" href="#">Heading</a></h3>要把锚点作为父元素、并对其某个子元素应用链接样式,只需为父元素添加 .uk-link-toggle 类,并为子元素添加某个 .uk-link-* 类。例如,你可以让整张卡片都可点击,同时让悬停效果作用在标题上。
<a class="uk-link-toggle" href="#">
<span class="uk-link-heading"></span>
</a><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>