缩略图导航／Thumbnav

创建灵活的缩略图导航。

用法

要使用缩略图来创建导航，请使用以下class。这个组件是用Flexbox构建的。因此，要对齐缩略图导航，可以使用 Flex 组件。

Class 描述
.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>

注意 为了更好的布局效果，如果项目需要换行到下一行，请添加 Margin component 中的 uk-margin 属性。

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

遮罩定位

要将缩略图导航放置在元素或 Slideshow 组件 的上层，请添加 Position component 中的 .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="/images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="/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="/images/photo.jpg" width="100" alt=""></a></li>
            <li uk-slideshow-item="1"><a href="#"><img src="/images/dark.jpg" width="100" alt=""></a></li>
            <li uk-slideshow-item="2"><a href="#"><img src="/images/light.jpg" width="100" alt=""></a></li>
        </ul>
    </div>

</div>

上一篇： Text

下一篇： Tile

thumbnav.md

# 缩略图导航／Thumbnav

<p class="uk-text-lead">创建灵活的缩略图导航。</p>

## Usage-用法

要使用缩略图来创建导航，请使用以下class。这个组件是用Flexbox构建的。因此，要对齐缩略图导航，可以使用 [Flex 组件](flex.md)。

| Class          | 描述    |
|:---------------|:----------------------------------------------------------------------|
| `.uk-thumbnav` | 添加到 `<ul>` 元素中以定义缩略图导航组件。将缩略图图片放入列表中的<a>元素内。 `<a>` 元素内。 |
| `.uk-active `  | 添加到列表项以应用活动状态。                                                     |

```html
<ul class="uk-thumbnav">
    <li class="uk-active"><a href=""><img src="" alt=""></a></li>
    <li><a href=""><img src="" alt=""></a></li>
</ul>
```

**注意** 为了更好的布局效果，如果项目需要换行到下一行，请添加 [Margin component](margin.md) 中的 `uk-margin` 属性。

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

***

## Vertical alignment-垂直排列

缩略图导航也可以垂直显示。只需添加 `.uk-thumbnav-vertical` class即可。

```html
<ul class="uk-thumbnav uk-thumbnav-vertical">...</ul>
```

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


***

## Position as overlay-遮罩定位

要将缩略图导航放置在元素或 [Slideshow 组件](slideshow.md) 的上层，请添加 [Position component](position.md) 中的 `.uk-position-*` class之一到包裹住缩略图导航的 `div` 元素。若要在容器上创建位置关联，请添加 `.uk-position-relative` class。

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

```example
<div class="uk-position-relative" uk-slideshow="animation: fade">

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="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="images/photo.jpg" width="100" alt=""></a></li>
            <li uk-slideshow-item="1"><a href="#"><img src="images/dark.jpg" width="100" alt=""></a></li>
            <li uk-slideshow-item="2"><a href="#"><img src="images/light.jpg" width="100" alt=""></a></li>
        </ul>
    </div>

</div>
```