跳至主要內容

文件

切換器

動態切換不同的內容窗格。

用法

切換器組件由多個切換開關及其相關的內容項目組成。將 uk-switcher 屬性新增至包含切換開關的列表元素。將 .uk-switcher 類別新增至包含內容項目的元素。

預設情況下，具有 .uk-switcher 類別的元素必須直接接在切換開關後面，切換器才能運作。如果您需要將其巢狀於另一個元素中，例如在使用格線時，請將 connect: SELECTOR 選項新增至 uk-switcher 屬性，並選取包含要切換項目的元素。

通常，切換器切換開關會透過其他組件設定樣式，其中一些會在此處顯示。

<!-- This is the nav containing the toggling elements -->
<ul uk-switcher>
    <li><a href="#"></a></li>
</ul>

<!-- This is the container of the content items -->
<div class="uk-switcher">
    <div></div>
</div>

在此範例中，我們使用的是次導覽組件。

哈囉！
再次哈囉！
巴扎卡！
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Hello!</div>
    <div>Hello again!</div>
    <div>Bazinga!</div>
</div>

在某些情況下，您希望從使用中的內容內切換到另一個內容區段。這可以使用 uk-switcher-item 屬性來完成。若要指定項目，您需要將屬性設定為個別內容項目的數字。

將屬性設定為 next 和 previous 將會切換到相鄰的項目。

<div class="uk-switcher uk-margin">
    <div><a href="#" uk-switcher-item="0"></a></div>
    <div><a href="#" uk-switcher-item="1"></a></div>
    <div><a href="#" uk-switcher-item="next"></a></div>
    <div><a href="#" uk-switcher-item="previous"></a></div>
</div>
再次哈囉！ 下一個項目
巴扎卡！ 上一個項目
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>
<div class="uk-switcher uk-margin">
    <div>Hello! <a href="#" uk-switcher-item="2">Switch to item 3</a></div>
    <div>Hello again! <a href="#" uk-switcher-item="next">Next item</a></div>
    <div>Bazinga! <a href="#" uk-switcher-item="previous">Previous item</a></div>
</div>

連結多個容器

也可以連結多個內容容器。只需將 connect 參數新增至 uk-switcher 屬性，並使用適用於所有項目的選取器即可。

<!-- This is the nav containing the toggling elements -->
<ul uk-switcher="connect: .my-class">…</ul>

<!-- These are the containers of the content items -->
<div class="uk-switcher my-class">…</div>

<div class="uk-switcher my-class">…</div>

容器 1

哈囉！
再次哈囉！
巴扎卡！

容器 2

哈囉！第一個項目。
再次哈囉！第二個項目。
巴扎卡！第三個項目。
<ul class="uk-subnav uk-subnav-pill" uk-switcher="connect: .switcher-container">
    <li><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<h4>Container 1</h4>

<div class="uk-switcher switcher-container uk-margin">
    <div>Hello!</div>
    <div>Hello again!</div>
    <div>Bazinga!</div>
</div>

<h4>Container 2</h4>

<div class="uk-switcher switcher-container uk-margin">
    <div>Hello! The first item.</div>
    <div>Hello again! The second item.</div>
    <div>Bazinga! The third item.</div>
</div>

動畫

您可以將動畫組件中的所有動畫套用至切換器項目。為此，請將 animation 參數與相關類別新增至 uk-switcher 屬性。

<ul uk-switcher="animation: uk-animation-fade">…</ul>
哈囉！
再次哈囉！
巴扎卡！
<ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-fade">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Hello!</div>
    <div>Hello again!</div>
    <div>Bazinga!</div>
</div>

多個動畫

您也可以套用動畫組件中的多個動畫。這樣您就可以新增不同的進入和退出動畫。

<ul uk-switcher="animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">…</ul>
哈囉！
再次哈囉！
巴扎卡！
<ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Hello!</div>
    <div>Hello again!</div>
    <div>Bazinga!</div>
</div>

切換器和次導覽

切換器可以輕鬆地套用至次導覽組件。

<!-- This is the subnav containing the toggling elements -->
<ul class="uk-subnav uk-subnav-pill" uk-switcher>…</ul>

<!-- This is the container of the content items -->
<div class="uk-switcher"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</div>
</div>

切換器和標籤頁

作為規則的例外，請將 uk-tab 屬性新增至標籤式導覽，而不是 uk-switcher，以將切換器與標籤頁組件結合。

<!-- This is the subnav containing the toggling elements -->
<ul uk-tab>…</ul>

<!-- This is the container of the content items -->
<ul class="uk-switcher">…</ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
<ul uk-tab>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<div class="uk-switcher uk-margin">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</div>
</div>

垂直標籤頁

使用格線和寬度組件，以垂直標籤式導覽正確顯示內容。

<div uk-grid>
    <div class="uk-width-auto">
        <ul class="uk-tab-left" uk-tab="connect: #my-id">…</ul>
    </div>
    <div class="uk-width-expand">
        <div id="my-id" class="uk-switcher">…</div>
    </div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div uk-grid>
            <div class="uk-width-auto@m">
                <ul class="uk-tab-left" uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
                    <li><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <div id="component-tab-left" class="uk-switcher">
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                    <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                    <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div uk-grid>
            <div class="uk-width-auto@m uk-flex-last@m">
                <ul class="uk-tab-right" uk-tab="connect: #component-tab-right; animation: uk-animation-fade">
                    <li><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <div id="component-tab-right" class="uk-switcher">
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                    <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                    <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</div>
                </div>
            </div>
        </div>
    </div>
</div>

切換器和按鈕

切換器也可以套用至按鈕組件中的按鈕或按鈕群組。只需將切換器屬性新增至按鈕群組周圍的區塊，或新增至具有 .uk-button-group 類別的元素。

<!-- This is a switcher using a number of buttons -->
<div uk-switcher="toggle: > *">
    <button class="uk-button uk-button-default" type="button"></button>
    <button class="uk-button uk-button-default" type="button"></button>
</div>

<div class="uk-switcher">…</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
<div uk-switcher="animation: uk-animation-fade; toggle: > *">
    <button class="uk-button uk-button-default" type="button">Item</button>
    <button class="uk-button uk-button-default" type="button">Item</button>
    <button class="uk-button uk-button-default" type="button">Item</button>
</div>

<div class="uk-switcher uk-margin">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</div>
</div>

注意由於此範例未將按鈕包裝在清單項目中，因此必須透過使用 toggle 選項來變更觸發內容切換的可點擊元素。

切換器和導覽

若要將切換器套用至導覽組件，請將 uk-switcher 屬性新增至導覽 <ul> 元素。使用格線和寬度組件，在格線配置中排列導覽和內容。

<div uk-grid>
    <div class="uk-width-small">
        <ul class="uk-nav uk-nav-default" uk-switcher="connect: #my-id">…</ul>
    </div>
    <div class="uk-width-expand">
        <div id="my-id" class="uk-switcher">…</div>
    </div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
<div uk-grid>
    <div class="uk-width-small@m">

        <ul class="uk-nav uk-nav-default" uk-switcher="connect: #component-nav; animation: uk-animation-fade">
            <li><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="uk-width-expand@m">

        <div id="component-nav" class="uk-switcher">
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</div>
        </div>

    </div>
</div>

組件選項

這些選項中的任何一個都可以套用至組件屬性。以分號分隔多個選項。深入瞭解

選項 值 預設值 描述
connect CSS 選取器 ~.uk-switcher 相關項目容器。預設為具有類別「uk-switcher」的後續元素。
toggle CSS 選取器 > * > :first-child 選取觸發內容切換的可點擊元素。
itemNav CSS 選取器 false 相關導覽容器。預設情況下，導覽項目僅在相關項目容器中找到。
active 數字 0 初始化時的活動索引。提供負數表示從集合末尾開始的位置。
animation 字串 false 動畫的空格分隔名稱。以逗號分隔以用於退出動畫。
duration 數字 200 動畫持續時間。
swiping 布林值 true 使用滑動。
followFocus 布林值 false 選取會自動追蹤焦點。

connect 是主要選項，如果它是屬性值中的唯一選項，則可以省略其索引鍵。

<span uk-switcher=".switcher-container"></span>

JavaScript

深入瞭解JavaScript 組件。

初始化

UIkit.switcher(element, options);

事件

以下事件會在附加此組件的元素的已連結項目上觸發

名稱 描述
beforeshow 在顯示項目之前觸發。可以透過在事件上呼叫 preventDefault() 來防止顯示。
show 在顯示項目之後觸發。
shown 在項目的顯示動畫完成後觸發。
beforehide 在隱藏項目之前觸發。可以透過在事件上呼叫 preventDefault() 來防止隱藏。
hide 在項目的隱藏動畫開始後觸發。
hidden 在隱藏項目之後觸發。

方法

以下方法適用於此組件

顯示

UIkit.switcher(element).show(index);

顯示具有指定索引的切換器項目。

名稱 類型 預設值 描述
index 字串、數字、節點 0 要顯示的切換器項目。以 0 為基礎的索引。

協助工具

切換器組件遵循 Tab WAI-ARIA 設計模式，並自動設定適當的 WAI-ARIA 角色、狀態和屬性。

鍵盤互動

可以使用以下按鍵透過鍵盤存取切換導覽。

預設情況下，切換器組件具有手動啟用行為。這表示只有使用 enter 或 space 鍵才會啟用對應的內容項目。若要切換為自動啟用，請將 follow-focus 設定為 true。瀏覽切換項目時，對應的內容項目將會自動變成活動狀態。