# 切換器/Switcher 通過不同的內容窗格進行動態變換。 ## 用法 切換器組件由若干撥動器和與它們相關聯的內容項目組成。添加 `data-uk-switcher="{connect:'#ID'}"` 到包含撥動器的元素，將此屬性內的ID指向具有相同ID的包含內容項目的元素。添加 `.uk-switcher` 類到同一個元素中。通常，切換器和其他組件搭配使用，這里將展示其中一部分。 ### 示例  ### Code ``` <!-- 這是包含撥動元素的容器 --> <ul data-uk-switcher="{connect:'#my-id'}"> <li><a href="">...</a></li> </ul> <!-- 這是內容項目的容器 --> <ul id="my-id" class="uk-switcher"> <li>...</li> </ul> ``` * * * ### 在內容中切換條目/Switch items from within content 在某些情況下，你想要從顯示的內容中操作切換到另一個內容節點。添加 `data-uk-switcher-item` 屬性使之成為可能。為了指向目標條目，你必須將 data 屬性設置為相應的標號。 #### Example  #### Markup ``` <!-- 這是包含撥動元素的導航 --> <ul data-uk-switcher="{connect:'#my-id'}"> <li><a href="">...</a></li> </ul> <!-- 這是內容條目的容器 --> <ul id="my-id" class="uk-switcher"> <li> ... <a href="" data-uk-switcher-item="0">...</a></li> <li> ... <a href="" data-uk-switcher-item="1">...</a></li> </ul> ``` 將 data 屬性設置為 `next` 和 `previous` 將會切換到相鄰的條目 #### Markup ``` <li> ... <a href="" data-uk-switcher-item="next">...</a></li> <li> ... <a href="" data-uk-switcher-item="previous">...</a></li> ``` * * * ### 關聯多個項目 切換器也可以管理多個內容容器。只需要在 `connect` 參數中填入需要關聯的容器的ID，用逗號隔開。 #### 示例  #### Code ``` <!-- 這是包含撥動元素的導航菜單 --> <ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}"> <li><a href="">...</a></li> </ul> <!-- 這些是包含著內容項目的容器們 --> <ul id="my-id-one" class="uk-switcher"> <li>...</li> </ul> <ul id="my-id-two" class="uk-switcher"> <li>...</li> </ul> ``` * * * ## 動畫 切換器組件允許你為它添加各式的切換動畫。你所需要做的就是添加 `animation` 參數到data屬性中，然后設置你希望使用的動畫。查閱下面的列表，了解我們提供的動畫吧。 | Class | 描述 | | --- | --- | | `fade` | 元素淡入 | | `scale` | 元素由小變大 | | `slide-top` | 元素從頂部滑入 | | `slide-bottom` | 元素從底部滑入 | | `slide-left` | 元素從左邊滑入 | | `slide-right` | 元素從右邊滑入 | | `slide-horizontal` | 內容項目水平方向滑動，方向基于元素相鄰關系。 | | `slide-vertical` | 內容項目垂直方向滑動，方向基于元素相鄰關系。 | ### 示例  ``` <!-- 包含撥動元素的容器 --> <ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}"> <li><a href="">...</a></li> </ul> <!-- 包含內容項目的容器 --> <ul id="my-id" class="uk-switcher"> <li>...</li> </ul> ``` * * * ### 自定義動畫 你同樣可以使用 [動畫組件](animation.html) 中的 `uk-animation-*` 類來應用多個動畫。通過這種方式你甚至可以創建你的自定義類來為切換器應用不同的動畫效果。 #### 示例  #### Code ``` <!-- 包含撥動元素的容器 --> <ul data-uk-switcher="{connect:'#my-id', animation: 'uk-animation-fade, uk-animation-slide-left'}"> <li><a href="">...</a></li> </ul> <!-- 包含內容項目的容器 --> <ul id="my-id" class="uk-switcher"> <li>...</li> </ul> ``` * * * ## 切換器與二級導航 輕松地將切換器應用于 [二級導航組件](subnav.html) 中. ### 示例  ### Code ``` <!-- 這是包含撥動元素的二級導航 --> <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}"> <li><a href="">...</a></li> </ul> <!-- 包含內容項目的容器 --> <ul id="my-id" class="uk-switcher"> <li>...</li> </ul> ``` * * * ## 切換器與選項卡 作為一個特例，添加 `data-uk-tab="{connect:'#ID'}"` 屬性，使用“tab”參數替代“switcher”，使得切換器和 [選項卡組件](tab.html "Tab component") 相互結合。 ### 示例  ### Code ``` <!-- 這是包含撥動元素的選項卡式導航 --> <ul class="uk-tab" data-uk-tab="{connect:'#my-id'}"> <li><a href="">...</a></li> </ul> <!-- 包含內容項目的容器 --> <ul id="my-id" class="uk-switcher uk-margin"> <li>...</li> </ul> ``` 注意 當使用選項卡組件的 `.uk-tab-bottom` 類的時候，導航和內容需要按相反的順序放置，這樣內容才會顯示在選項卡的上方。 * * * ### 垂直選項卡 使用 [網格組件](grid.html "Grid component")正確地顯示帶有垂直排列的選項卡導航的內容。 #### 示例  #### Code ``` <!-- 位于左邊的選項卡式導航 --> <div class="uk-grid"> <div class="uk-width-medium-1-2"> <!-- 包含撥動元素的垂直選項卡式導航 --> <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}">...</ul> </div> <div class="uk-width-medium-1-2"> <!-- 包含內容項目的容器 --> <ul id="my-id" class="uk-switcher">...</ul> </div> </div> <!-- 位于右邊的選項卡式導航 --> <div class="uk-grid"> <div class="uk-width-medium-1-2 uk-push-1-2"> <!-- 包含撥動元素的垂直選項卡式導航 --> <ul class="uk-tab uk-tab-right" data-uk-tab="{connect:'#my-id'}">...</ul> </div> <div class="uk-width-medium-1-2 uk-pull-1-2"> <!-- 包含內容項目的容器 --> <ul id="my-id" class="uk-switcher">...</ul> </div> </div> ``` * * * ## 切換器與按鈕 切換器同樣可以應用于 [按鈕或按鈕組](button.html "Button component") 中。只需要添加切換器data屬性到包含了一組按鈕的 `&lt;div&gt;` 元素中或者添加到帶有 `.button-group` 類的元素。 ### 示例  ### Code ``` <!-- 包含撥動按鈕的容器 --> <div data-uk-switcher="{connect:'#my-id'}"> <button class="uk-button" type="button">...</button> </div> <!-- 包含內容項目的容器 --> <ul id="my-id" class="uk-switcher uk-margin">...</ul> <!-- 包含撥動按鈕的按鈕租 --> <div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}"> <button class="uk-button" type="button">...</button> </div> <!-- 包含內容項目的容器 --> <ul id="my-id" class="uk-switcher uk-margin">...</ul> ``` * * * ## 切換器與導航菜單 若需將切換器應用于 [導航菜單組件](nav.html "Nav component")，添加data屬性到導航菜單的 `&lt;ul&gt;` 元素中。使用 [網格組件](grid.html "Grid component") 將導航菜單和內容項放置在同一個網格布局中。 ### 示例  ### Code ``` <div class="uk-grid"> <div class="uk-width-medium-1-4"> <!-- 包含撥動元素的導航菜單 --> <ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#my-id'}"> <li><a href="">...</a></li> </ul> </div> <div class="uk-width-medium-3-4"> <!-- 包含內容項目的容器 --> <ul id="my-id" class="uk-switcher"> <li>...</li> </ul> </div> </div> ``` * * * ## JavaScript 選項 這是一個關于如何通過屬性設置選項的例子： ``` data-uk-switcher="{active:1}" ``` | 選項 | 可能的值 | 默認值 | 描述 | | --- | --- | --- | --- | | `connect` | CSS selector | false | 被關聯的條目容器 | | `toggle` | CSS selector | '&gt; *' | 撥動CSS選擇器，通過點擊觸發內容的切換行為。 | | `active` | integer | 0 | 初始化時，呈激活狀態的內容項目索引值 | | `animation` | mixed | false | 預定義的動畫名稱或 uikit動畫的類名。 | | `swiping` | boolean | true | 啟用或禁用通過滑動改變內容 | ### 事件 你可以為以下事件綁定回調函數，用于自定義功能： | 事件名稱 | 參數 | 描述 | | --- | --- | --- | | `show.uk.switcher` | event, active item | 切換器條目顯示或改變時觸發 | ### Example ``` $('[data-uk-switcher]').on('show.uk.switcher', function(event, area){ console.log("Switcher switched to ", area); }); ```