Thumbnav

Создавайте удобную и гибкую навигацию миниатюрами, которая может быть выстроена с помощью компонента Flex.

Использование

Чтобы применить компонент Thumbnav, добавьте класс .uk-thumbnav к элементу <ul> и вложите миниатюрные изображения с ссылками в список. Thumbnav выстраивается в несколько рядов, если он оказывается шире своего контейнера, то он подстраивается автоматически. Добавьте класс .uk-active, чтобы отобразить активное состояние.

Пример

Разметка

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

Выравнивание

Чтобы выровнять thumbnav, например, горизонтально отцентрировать его, вы можете использовать компонент Flex.

Пример

Разметка

<ul class="uk-thumbnav uk-flex-center">
    <li class="uk-active"><a href=""><img src="" width="" height="" alt=""></a></li>
    <li><a href=""><img src="" width="" height="" alt=""></a></li>
</ul>

Thumbnav и Grid

Вы можете использовать один из классов .uk-grid-width-* из компонента Grid, чтобы равномерно разместить все элементы .uk-thumbnav в одной строке.

Пример

Разметка

<ul class="uk-thumbnav uk-grid-width-1-5">
    <li><a href=""><img src="" width="" height="" alt=""></a></li>
    ...
</ul>