跳至主要內容

文件

切換

透過切換來隱藏、切換或變更不同內容的外觀。

使用方式

若要套用此元件，只需將 uk-toggle="target: #ID" 屬性新增至 <button> 或 <a> 元素。 您可以使用任何帶有切換屬性的選擇器。

切換可以用於新增或移除項目的類別或屬性。預設情況下，它會新增 hidden 屬性來隱藏元素。

<button uk-toggle="target: #my-id" type="button"></button>
<p id="my-id"></p>

怎麼了？

<div>
    <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-usage">Toggle</button>
    <p id="toggle-usage">What's up?</p>
</div>

多個項目

您也可以同時切換多個項目。只需將 target: SELECTOR 選項新增至 uk-toggle 屬性，並使用適用於所有項目的選擇器。

<button type="button" uk-toggle="target: .my-class"></button>
<p class="my-class"></p>
<p class="my-class"></p>

哈囉！

<button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle">Toggle</button>
<p class="toggle">Hello!</p>
<p class="toggle" hidden>Bazinga!</p>

注意 在此範例中，我們將 hidden 屬性新增至其中一個項目，以便只顯示另一個項目。切換將在兩個元素之間切換可見狀態。

自訂類別

如果您不想切換 hidden 屬性，您也可以切換自訂類別。只需將 cls: CLASS 選項新增至 uk-toggle 屬性。在此範例中，我們使用 .uk-card-primary 類別來在不同卡片樣式之間切換。

<button type="button" uk-toggle="target: #my-id; cls: uk-card-primary"></button>
<p id="my-id" class="uk-card uk-card-default"></p>
自訂類別
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-custom; cls: uk-card-primary">Toggle</button>
<div id="toggle-custom" class="uk-card uk-card-default uk-card-body uk-margin-small">Custom class</div>

動畫

切換元件允許您在切換項目時為項目新增動畫。只需將 動畫元件 中的其中一個 .uk-animation-* 類別新增至動畫參數。該類別將會套用至進入和離開動畫。如果您偏好其他動畫，只需新增另一個類別。

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-fade"></button>
<p id="my-id"></p>
動畫
<button href="#toggle-animation" class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-animation; animation: uk-animation-fade">Toggle</button>
<div id="toggle-animation" class="uk-card uk-card-default uk-card-body uk-margin-small">Animation</div>

多個動畫

您也可以套用動畫元件的多個動畫。這樣您就可以新增不同的進入和離開動畫。

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-slide-left, uk-animation-slide-bottom"></button>
<p id="my-id"></p>
動畫
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-animation-multiple; animation:  uk-animation-slide-left, uk-animation-slide-bottom">Toggle</button>
<div id="toggle-animation-multiple" class="uk-card uk-card-default uk-card-body uk-margin-small">Animation</div>

排隊動畫

當使用動畫切換多個項目時，您可能想要等到第一個動畫執行完畢後再動畫顯示第二個項目。若要執行此操作，只需將 queued: true 選項新增至 uk-toggle 屬性。

<button type="button" uk-toggle="target: .my-class; animation: uk-animation-fade; queued: true"></button>
<p class="my-class"></p>
<p class="my-class"></p>

動畫

<button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle-animation-queued; animation: uk-animation-fade; queued: true; duration: 300">Toggle</button>
<p class="toggle-animation-queued uk-card uk-card-default uk-card-body uk-margin-small">Animation</p>
<p class="toggle-animation-queued uk-card uk-card-primary uk-card-body uk-margin-small" hidden>Animation</p>

模式

可以使用不同的方式觸發切換。只需將 mode 選項新增至 uk-toggle 屬性，並套用這些值之一。

值 描述
hover 切換將在滑鼠懸停時觸發。
click 切換將在點擊時觸發。這是預設值。
click, hover 切換將在點擊和滑鼠懸停時觸發。
media 切換行為取決於視窗寬度。更多資訊。 
<button type="button" uk-toggle="target: #my-id; mode: hover"></button>
<p id="my-id"></p>

怎麼了？

<button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-hover; mode: hover">hover</button>
<p id="toggle-hover">What's up?</p>

媒體

當使用 media 模式時，也必須新增具有可能值之一的 media 選項。例如，以像素為單位新增數字，例如 640，或新增斷點，例如 @s、@m、@l 或 @xl。如果沒有 target 選項，切換會將切換狀態套用至自身。這表示它將根據顯示的視窗寬度，在 cls 選項中定義的不同狀態之間切換。

<!-- The primary modifier will only be applied on large screens -->

<div class="uk-card uk-card-default" uk-toggle="cls: uk-card-primary; mode: media; media: @l"></div>
在大螢幕上為主要
<div class="uk-card uk-card-default uk-card-body uk-width-medium" uk-toggle="cls: uk-card-primary; mode: media; media: @l">
    Primary on large screens
</div>

注意 初始切換狀態取決於 cls 選項。它是以空格分隔的清單中的第一個指定類別，或者如果設定為 false，則為 hidden 屬性。如果指定多個類別，則會在狀態變更時簡單地切換其他類別。

元件選項

任何這些選項都可以套用至元件屬性。使用分號分隔多個選項。了解更多

選項 值 預設值 描述
target 字串 false 要切換的元素之 CSS 選擇器。
mode 字串 click 觸發行為模式的逗號分隔清單。(hover、click、media)
cls 字串 false 要切換的類別。預設為 hidden 屬性。
media 數字、字串 false 在媒體模式中，觸發切換的斷點 - 以整數表示的寬度（例如 640）或斷點（例如 @s、@m、@l、@xl）或任何有效的媒體查詢（例如 (min-width: 900px)）。
animation 字串 false 動畫的空格分隔名稱。以逗號分隔，表示動畫離開。
duration 數字 200 動畫持續時間，以毫秒為單位。
queued 布林值 true 依序切換目標。

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

<span uk-toggle=".my-class"></span>

JavaScript

深入了解JavaScript 元件。

初始化

UIkit.toggle(element, options);

事件

以下事件將在附加此元件的元素上觸發

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

方法

以下方法可用於元件

切換

UIkit.toggle(element).toggle();

切換切換的目標。

無障礙設計

切換元件會自動設定適當的 WAI-ARIA 角色、狀態和屬性。