缩略图导航

创建一个灵活的缩略图导航，可以与 Flex 组件 对齐。

用法

要应用此组件，请将 .uk-thumbnav 类添加到 <ul> 元素，并将缩略图图像嵌套在列表项内的 <a> 元素中。如果缩略图导航的宽度大于其容器，它将自动换行成多行，并自动应用间距。添加 .uk-active 类来创建激活状态。

要对齐子导航，例如使其水平居中，可以使用 Flex 组件。

示例

标记

<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-grid-width-* 类之一，使所有缩略图导航项均匀地排列在一行中。

示例

标记

<ul class="uk-thumbnav uk-grid-width-1-5">
    <li>...</li>
</ul>