跳至主要內容

文件

圓點導航

建立圓點導航以操作幻燈片或捲動至不同的頁面區塊。

用法

若要建立帶有圓點的導航，請使用以下類別。此元件是使用 Flexbox 建置的。因此，若要對齊圓點導航，可以使用 彈性盒子元件。

類別 說明
.uk-dotnav 將此類別新增至 <ul> 元素以定義圓點導航元件。使用 <a> 元素作為清單中的導航項目。
.uk-active 將此類別新增至清單項目以套用啟用狀態。 
<ul class="uk-dotnav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
<ul class="uk-dotnav">
    <li class="uk-active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

垂直對齊

圓點導航也可以垂直顯示。只需新增 .uk-dotnav-vertical 修飾符即可。

<ul class="uk-dotnav uk-dotnav-vertical">…</ul>
<ul class="uk-dotnav uk-dotnav-vertical">
    <li class="uk-active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

作為覆蓋層定位

若要將圓點導航定位在元素或例如 幻燈片組件 的頂部，請將 定位元件 的 .uk-position-* 類別之一新增至包裝圓點導航的 div 元素。若要在容器上建立定位內容，請新增 .uk-position-relative 類別。

使用 反轉元件 的 .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>

在視窗中垂直置中

透過新增 定位元件 的 .uk-position-center-right 和 .uk-position-fixed 類別，圓點導航也可以在您的視窗中垂直置中。這對於典型的一頁式網站很有用。

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