跳至主要内容

文档

缩略图导航

创建灵活的缩略图导航。

用法

要创建具有缩略图的导航，请使用以下类。此组件使用 Flexbox 构建。因此，要对齐缩略图导航，可以使用 Flex 组件.

类 描述
.uk-thumbnav 将此类添加到 <ul> 元素以定义缩略图导航组件。将缩略图图像嵌套在列表内的 <a> 元素中。
.uk-active 将此类添加到列表项以应用活动状态。 
<ul class="uk-thumbnav">
    <li class="uk-active"><a href=""><img src="" width="" height="" alt=""></a></li>
    <li><a href=""><img src="" alt=""></a></li>
</ul>

注意 为了获得更好的布局，如果项目应该换行到下一行，请添加来自 边距组件 的 uk-margin 属性。

  • <ul class="uk-thumbnav" uk-margin>
    <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="100" height="67" alt=""></a></li>
    <li><a href="#"><img src="images/dark.jpg" width="100" height="67" alt=""></a></li>
    <li><a href="#"><img src="images/light.jpg" width="100" height="67" alt=""></a></li>
</ul>

垂直对齐

缩略图导航也可以垂直显示。只需添加 .uk-thumbnav-vertical 修饰符。

<ul class="uk-thumbnav uk-thumbnav-vertical">…</ul>
  • <ul class="uk-thumbnav uk-thumbnav-vertical" uk-margin>
    <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="100" height="67" alt=""></a></li>
    <li><a href="#"><img src="images/dark.jpg" width="100" height="67" alt=""></a></li>
    <li><a href="#"><img src="images/light.jpg" width="100" height="67" alt=""></a></li>
</ul>

定位为叠加层

要将缩略图导航定位在元素或 幻灯片组件 之上，例如，请将来自 定位组件 的 .uk-position-* 类之一添加到包装缩略图导航的 div 元素中。要为容器创建定位上下文，请添加 .uk-position-relative 类。

<div class="uk-position-relative">

    <!-- The element which is wrapped goes here -->

    <div class="uk-position-bottom-center uk-position-small">
        <ul class="uk-thumbnav">…</ul>
    </div>

</div>
  • <div class="uk-position-relative" uk-slideshow="animation: fade">

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
        </div>
    </div>

    <div class="uk-position-bottom-center uk-position-small">
        <ul class="uk-thumbnav">
            <li uk-slideshow-item="0"><a href="#"><img src="images/photo.jpg" width="100" height="67" alt=""></a></li>
            <li uk-slideshow-item="1"><a href="#"><img src="images/dark.jpg" width="100" height="67" alt=""></a></li>
            <li uk-slideshow-item="2"><a href="#"><img src="images/light.jpg" width="100" height="67" alt=""></a></li>
        </ul>
    </div>

</div>