メインコンテンツへスキップ

ドキュメント

サムネイルナビゲーション

柔軟なサムネイルナビゲーションを作成します。

使用方法

サムネイル付きのナビゲーションを作成するには、以下のクラスを使用します。このコンポーネントはFlexboxで構築されています。サムネイルナビゲーションを配置するには、フレックスコンポーネントを使用できます。

クラス 説明
.uk-thumbnav このクラスを<ul>要素に追加して、サムネイルナビゲーションコンポーネントを定義します。サムネイル画像をリスト内の<a>要素の中にネストします。
.uk-active このクラスをリストアイテムに追加して、アクティブ状態を適用します。 
<ul class="uk-thumbnav">
    <li class="uk-active"><a href=""><img src="" width="" height="" alt=""></a></li>
    <li><a href=""><img src="" alt=""></a></li>
</ul>

注記 レイアウトを改善するために、アイテムが次の行に折り返される場合は、マージンコンポーネントからuk-margin属性を追加します。

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

垂直方向の配置

サムネイルナビゲーションは垂直方向にも表示できます。 .uk-thumbnav-verticalモディファイアを追加するだけです。

<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" height="67" alt=""></a></li>
    <li><a href="#"><img src="images/dark.jpg" width="100" height="67" alt=""></a></li>
    <li><a href="#"><img src="images/light.jpg" width="100" height="67" alt=""></a></li>
</ul>

オーバーレイとしての配置

サムネイルナビゲーションを要素の上、または例えばスライドショーコンポーネントの上に配置するには、位置コンポーネントの.uk-position-*クラスのいずれかを、サムネイルナビゲーションを囲むdiv要素に追加します。コンテナに位置コンテキストを作成するには、.uk-position-relativeクラスを追加します。

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

    <div class="uk-slideshow-items">
        <div>
            <img src="images/photo.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/dark.jpg" alt="" uk-cover>
        </div>
        <div>
            <img src="images/light.jpg" alt="" uk-cover>
        </div>
    </div>

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

</div>