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

ドキュメント

ドットナビ

スライドショーを操作したり、異なるページセクションにスクロールしたりするためのドットナビゲーションを作成します。

使い方

ドット付きのナビゲーションを作成するには、次のクラスを使用します。このコンポーネントはFlexboxで構築されています。したがって、ドットナビを整列するには、Flexコンポーネントを使用できます。

クラス 説明
.uk-dotnav ドットナビコンポーネントを定義するには、このクラスを<ul>要素に追加します。リスト内のナビアイテムとして<a>要素を使用します。
.uk-active アクティブな状態を適用するには、このクラスをリスト項目に追加します。 
<ul class="uk-dotnav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

垂直方向の配置

ドットナビは垂直に表示することもできます。.uk-dotnav-verticalモディファイアを追加するだけです。

<ul class="uk-dotnav uk-dotnav-vertical">…</ul>

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

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

視認性を向上させるために、Inverseコンポーネントの.uk-lightまたは.uk-darkクラスを使用して、明るい色または暗い色を適用します。

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

    <!-- The element which is wrapped goes here -->

    <div class="uk-position-bottom-center uk-position-small">
        <ul class="uk-dotnav">…</ul>
    </div>

</div>
  • <div class="uk-position-relative uk-light" uk-slideshow>

    <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/size1.jpg" alt="" uk-cover>
        </div>
    </div>

    <div class="uk-position-bottom-center uk-position-small">
        <ul class="uk-dotnav">
            <li uk-slideshow-item="0"><a href="#">Item 1</a></li>
            <li uk-slideshow-item="1"><a href="#">Item 2</a></li>
            <li uk-slideshow-item="2"><a href="#">Item 3</a></li>
        </ul>
    </div>

</div>

ビューポート内の中央垂直配置

ドットナビは、Positionコンポーネントの.uk-position-center-rightおよび.uk-position-fixedクラスを追加することで、ビューポート内で垂直方向に中央に配置することもできます。これは、典型的な1ページWebサイトに役立ちます。

<div class="uk-position-center-right uk-position-medium uk-position-fixed">
    <ul class="uk-dotnav uk-dotnav-vertical">…</ul>
</div>