Эскизы

Создавайте гибкие миниатюры для навигации с применением FlexBox.

Как использовать компонент Thumbnav в UIkit 3

Чтобы создать навигацию с миниатюрами, используйте классы, приведенные в таблице ниже. Этот компонент построен с применением Flexbox. Читать документацию по компоненту Flex.

Класс Описание
.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>

Внимание Для улучшения отображения добавьте класс атрибут uk-margin из компонента 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 к элементу <ul>.

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

Использование навигации в качестве наложения

Такая навигация может быть использована в сочетании с различными компонентами UIkit 3. В данном примере показан пример использования миниатюр в качестве панели навигации для компонента Slideshow. Добавьте класс семейства .uk-position-* из компонента Позиции к элементу div.
Создайте контекст наложения, добавив класс .uk-position-relative. В результате получится такая разметка:

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

    <!-- Компонент, находящийся внутри обертки  -->

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