Switcher
Dynamically transition through different content panes.
Usage
The switcher component consists of a number of toggles and their related content items. Add the data-uk-switcher="{connect:'#ID'}" attribute to the element which contains the toggles, targetting the same id as is used on the element containing the content items. Add the .uk-switcher class to the same element. Typically the switcher is combined with other components, some of which will be shown here.
Example
Markup
<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
<li><a href="">...</a></li>
</ul>
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
<li>...</li>
</ul>Switch items from within content
In some cases you want to switch to another content section from within the active content. This is possible using the data-uk-switcher-item attribute. To target the items, you need to set the data attribute to the number of the respective content item.
Example
- Hello! Switch to the next content section
- Hello again! Switch to third content section 3
- Bazinga! Switch to the previous content section
Markup
<!-- This is the nav containing the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
<li><a href="">...</a></li>
</ul>
<!-- This is the container of the content items -->
<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>Setting the attribute to next and previous will switch to the adjacent items.
Markup
<li> ... <a href="" data-uk-switcher-item="next">...</a></li>
<li> ... <a href="" data-uk-switcher-item="previous">...</a></li>Connect multiple items
It is also possible to connect multiple content containers. Just extend the connect parameter with the ID of the additional container.
Example
Container 1
- Hello from container 1!
- Hello again from container 1!
- Bazinga from container 1!
Container 2
- Hello from container 2!
- Hello again from container 2!
- Bazinga from container 2!
Markup
<!-- This is the nav containing the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}">
<li><a href="">...</a></li>
</ul>
<!-- These are the containers of the content items -->
<ul id="my-id-one" class="uk-switcher">
<li>...</li>
</ul>
<ul id="my-id-two" class="uk-switcher">
<li>...</li>
</ul>Animations
The Switcher component allows you to add different animations to items when toggling between them. All you need to do is add the animation parameter to the data-attribute and define the animation that you want to apply. Check the table below for an overview of the animations provided.
| Class | Description |
|---|---|
fade |
The element fades in. |
scale |
The items scale up. |
slide-top |
The items slide in from the top. |
slide-bottom |
The items slide in from the bottom. |
slide-left |
The items slide in from the left. |
slide-right |
The items slide in from the right. |
slide-horizontal |
The items slide horizontally, the direction depending on the adjacency of the item. |
slide-vertical |
The items slide vertically, the direction depending on the adjacency of the item. |
Example
Fade
- Hello!
- Hello again!
- Bazinga!
Scale
- Hello!
- Hello again!
- Bazinga!
Slide top
- Hello!
- Hello again!
- Bazinga!
Slide bottom
- Hello!
- Hello again!
- Bazinga!
Slide left
- Hello!
- Hello again!
- Bazinga!
Slide right
- Hello!
- Hello again!
- Bazinga!
Slide horizontal
- Hello!
- Hello again!
- Bazinga!
Slide vertical
- Hello!
- Hello again!
- Bazinga!
Markup
<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}">
<li><a href="">...</a></li>
</ul>
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
<li>...</li>
</ul>Custom animations
You can also apply multiple animations by using the uk-animation-* classes from the Animation component. That way you can even create your own custom class to apply a different transition to the switcher.
Example
- Hello!
- Hello again!
- Bazinga!
Markup
<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'uk-animation-fade, uk-animation-slide-left'}">
<li><a href="">...</a></li>
</ul>
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
<li>...</li>
</ul>Switcher with subnav
The switcher is easily applied to the Subnav component.
Example
Markup
<!-- This is the subnav containing the toggling elements -->
<ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}">
<li><a href="">...</a></li>
</ul>
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
<li>...</li>
</ul>Switcher with tabs
As an exception to the rule, add the data-uk-tab="{connect:'#ID'}" attribute, using the parameter "tab" instead of "switcher", to the tabbed navigation to combine the switcher with the Tab component.
Example
Markup
<!-- This is the tabbed navigation containing the toggling elements -->
<ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
<li><a href="">...</a></li>
</ul>
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">
<li>...</li>
</ul>NOTE When using the tab bottom modifier, navigation and content need to be arranged in reversed order, so that the content appears above the tabs.
Vertical tab
Use the Grid component to display content correctly with a vertical tabbed navigation.
Example
Example
<!-- This is the left vertical tabbed navigation -->
<div class="uk-grid">
<div class="uk-width-medium-1-2">
<!-- This is the vertical tabbed navigation containing the toggling elements -->
<ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}">...</ul>
</div>
<div class="uk-width-medium-1-2">
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">...</ul>
</div>
</div>
<!-- This is the right vertical tabbed navigation -->
<div class="uk-grid">
<div class="uk-width-medium-1-2 uk-push-1-2">
<!-- This is the vertical tabbed navigation containing the toggling elements -->
<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">
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">...</ul>
</div>
</div>Switcher with buttons
The switcher can also be applied to buttons or button groups from the Button component. Just add the switcher data attribute to a <div> element around a group of buttons or to the element with the .button-group class.
Example
Markup
<!-- This is the container of the toggling buttons -->
<div data-uk-switcher="{connect:'#my-id'}">
<button class="uk-button" type="button">...</button>
</div>
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">...</ul>
<!-- This is the button group containing the toggling buttons -->
<div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}">
<button class="uk-button" type="button">...</button>
</div>
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">...</ul>Switcher with navs
To apply the switcher to the Nav component, add the data attribute to the nav <ul>. Use the Grid component to arrange nav and content in a grid layout.
Example
Markup
<div class="uk-grid">
<div class="uk-width-medium-1-4">
<!-- This is the nav containing the toggling elements -->
<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">
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
<li>...</li>
</ul>
</div>
</div>JavaScript options
This is an example of how to set options via attribute:
data-uk-switcher="{active:1}"| Option | Possible value | Default | Description |
|---|---|---|---|
connect |
CSS selector | false | Related items container |
toggle |
CSS selector | '> *' | Toggle css selector, triggering content switching on click |
active |
integer | 0 | Active index on init |
animation |
mixed | false | Predefined animation name or any uk-animation class name. |
Events
You can bind callbacks to following events for custom functionality:
| Name | Parameter | Description |
|---|---|---|
show.uk.switcher |
event, active item | On switcher item show/change |
Example
$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
console.log("Switcher switched to ", area);
});
