缩略图导航
创建灵活的缩略图导航。
用法
要使用缩略图来创建导航，请使用以下class。这个组件是用Flexbox构建的。因此，要对齐缩略图导航，可以使用Flex 组件。
| Class | Description |
|---|---|
.uk-thumbnav |
添加到<ul>元素中以定义缩略图导航组件。将缩略图图片放入列表中的<a>元素内。
|
.uk-active |
添加到列表项以应用活动状态。 |
<ul class="uk-thumbnav">
<li class="uk-active"><a href=""><img src="" alt=""></a></li>
<li><a href=""><img src="" alt=""></a></li>
</ul>
Note为了更好的布局效果，如果项目需要换行到下一行，请添加Margin
组件中的uk-margin属性。
-
-
-
<ul class="uk-thumbnav" uk-margin> <li class="uk-active"><a href="#"><img src="/skin/ukv3/images/photo.jpg" width="100" alt=""></a></li> <li><a href="#"><img src="/skin/ukv3/images/dark.jpg" width="100" alt=""></a></li> <li><a href="#"><img src="/skin/ukv3/images/light.jpg" width="100" alt=""></a></li> </ul>
垂直排列
缩略图导航也可以垂直显示。只需添加.uk-thumbnav-vertical class即可。
<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="/skin/ukv3/images/photo.jpg" width="100" alt=""></a></li> <li><a href="#"><img src="/skin/ukv3/images/dark.jpg" width="100" alt=""></a></li> <li><a href="#"><img src="/skin/ukv3/images/light.jpg" width="100" alt=""></a></li> </ul>
遮罩定位
要将缩略图导航放置在元素或Slideshow 组件的上层，请添加Position
组件中的.uk-position-*
class之一到包裹住缩略图导航的div元素。若要在容器上创建位置关联，请添加.uk-position-relative
class。
<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"> <ul class="uk-slideshow-items"> <li> <img src="/skin/ukv3/images/photo.jpg" alt="" uk-cover> </li> <li> <img src="/skin/ukv3/images/dark.jpg" alt="" uk-cover> </li> <li> <img src="/skin/ukv3/images/light.jpg" alt="" uk-cover> </li> </ul> <div class="uk-position-bottom-center uk-position-small"> <ul class="uk-thumbnav"> <li uk-slideshow-item="0"><a href="#"><img src="/skin/ukv3/images/photo.jpg" width="100" alt=""></a></li> <li uk-slideshow-item="1"><a href="#"><img src="/skin/ukv3/images/dark.jpg" width="100" alt=""></a></li> <li uk-slideshow-item="2"><a href="#"><img src="/skin/ukv3/images/light.jpg" width="100" alt=""></a></li> </ul> </div> </div>