Dynamically transition through different content panes.
\n\nUsage
\n\nThe 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
\n\n \n\n \n\nMarkup
\n\n<!-- This is the container of the toggling elements -->\n<ul data-uk-switcher="{connect:'#my-id'}">\n <li><a href="">...</a></li>\n</ul>\n\n<!-- This is the container of the content items -->\n<ul id="my-id" class="uk-switcher">\n <li>...</li>\n</ul>
\n\n \n\n
Switch items from within content
\n\nIn 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
\n\n- \n
- Hello! Switch to the next content section \n
- Hello again! Switch to third content section 3 \n
- Bazinga! Switch to the previous content section \n
Markup
\n\n<!-- This is the nav containing the toggling elements -->\n<ul data-uk-switcher="{connect:'#my-id'}">\n <li><a href="">...</a></li>\n</ul>\n\n<!-- This is the container of the content items -->\n<ul id="my-id" class="uk-switcher">\n <li> ... <a href="" data-uk-switcher-item="0">...</a></li>\n <li> ... <a href="" data-uk-switcher-item="1">...</a></li>\n</ul>
\n\n Setting the attribute to next
and previous
will switch to the adjacent items.
Markup
\n\n<li> ... <a href="" data-uk-switcher-item="next">...</a></li>\n<li> ... <a href="" data-uk-switcher-item="previous">...</a></li>
\n\n \n\n
Connect multiple items
\n\nIt is also possible to connect multiple content containers. Just extend the connect
parameter with the ID of the additional container.
Example
\n\nContainer 1
\n- \n
- Hello from container 1! \n
- Hello again from container 1! \n
- Bazinga from container 1! \n
Container 2
\n- \n
- Hello from container 2! \n
- Hello again from container 2! \n
- Bazinga from container 2! \n
Markup
\n\n<!-- This is the nav containing the toggling elements -->\n<ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}">\n <li><a href="">...</a></li>\n</ul>\n\n<!-- These are the containers of the content items -->\n<ul id="my-id-one" class="uk-switcher">\n <li>...</li>\n</ul>\n\n<ul id="my-id-two" class="uk-switcher">\n <li>...</li>\n</ul>
\n\n \n\n
Animations
\n\nThe 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 | \nDescription | \n
---|---|
fade | \n The element fades in. | \n
scale | \n The items scale up. | \n
slide-top | \n The items slide in from the top. | \n
slide-bottom | \n The items slide in from the bottom. | \n
slide-left | \n The items slide in from the left. | \n
slide-right | \n The items slide in from the right. | \n
slide-horizontal | \n The items slide horizontally, the direction depending on the adjacency of the item. | \n
slide-vertical | \n The items slide vertically, the direction depending on the adjacency of the item. | \n
Example
\n\nFade
\n\n \n\n- \n
- Hello! \n
- Hello again! \n
- Bazinga! \n
Scale
\n\n \n\n- \n
- Hello! \n
- Hello again! \n
- Bazinga! \n
Slide top
\n\n \n\n- \n
- Hello! \n
- Hello again! \n
- Bazinga! \n
Slide bottom
\n\n \n\n- \n
- Hello! \n
- Hello again! \n
- Bazinga! \n
Slide left
\n\n \n\n- \n
- Hello! \n
- Hello again! \n
- Bazinga! \n
Slide right
\n\n \n\n- \n
- Hello! \n
- Hello again! \n
- Bazinga! \n
Slide horizontal
\n\n \n\n- \n
- Hello! \n
- Hello again! \n
- Bazinga! \n
Slide vertical
\n\n \n\n- \n
- Hello! \n
- Hello again! \n
- Bazinga! \n
Markup
\n\n<!-- This is the container of the toggling elements -->\n<ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}">\n <li><a href="">...</a></li>\n</ul>\n\n<!-- This is the container of the content items -->\n<ul id="my-id" class="uk-switcher">\n <li>...</li>\n</ul>
\n\n \n\n
Custom animations
\n\nYou 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
\n\n \n\n- \n
- Hello! \n
- Hello again! \n
- Bazinga! \n
Markup
\n\n<!-- This is the container of the toggling elements -->\n<ul data-uk-switcher="{connect:'#my-id', animation: 'uk-animation-fade, uk-animation-slide-left'}">\n <li><a href="">...</a></li>\n</ul>\n\n<!-- This is the container of the content items -->\n<ul id="my-id" class="uk-switcher">\n <li>...</li>\n</ul>
\n\n \n\n
Switcher with subnav
\n\nThe switcher is easily applied to the Subnav component.
\n\nExample
\n\n \n\n \n\nMarkup
\n\n<!-- This is the subnav containing the toggling elements -->\n<ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}">\n <li><a href="">...</a></li>\n</ul>\n\n<!-- This is the container of the content items -->\n<ul id="my-id" class="uk-switcher">\n <li>...</li>\n</ul>
\n\n \n\n
Switcher with tabs
\n\nAs 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
\n\nMarkup
\n\n<!-- This is the tabbed navigation containing the toggling elements -->\n<ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">\n <li><a href="">...</a></li>\n</ul>\n\n<!-- This is the container of the content items -->\n<ul id="my-id" class="uk-switcher uk-margin">\n <li>...</li>\n</ul>
\n\n 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.
\n\n\n\n
Vertical tab
\n\nUse the Grid component to display content correctly with a vertical tabbed navigation.
\n\nExample
\n\nExample
\n\n<!-- This is the left vertical tabbed navigation -->\n<div class="uk-grid">\n <div class="uk-width-medium-1-2">\n <!-- This is the vertical tabbed navigation containing the toggling elements -->\n <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}">...</ul>\n </div>\n <div class="uk-width-medium-1-2">\n <!-- This is the container of the content items -->\n <ul id="my-id" class="uk-switcher">...</ul>\n </div>\n</div>\n\n<!-- This is the right vertical tabbed navigation -->\n<div class="uk-grid">\n <div class="uk-width-medium-1-2 uk-push-1-2">\n <!-- This is the vertical tabbed navigation containing the toggling elements -->\n <ul class="uk-tab uk-tab-right" data-uk-tab="{connect:'#my-id'}">...</ul>\n </div>\n <div class="uk-width-medium-1-2 uk-pull-1-2">\n <!-- This is the container of the content items -->\n <ul id="my-id" class="uk-switcher">...</ul>\n </div>\n</div>
\n\n \n\n
Switcher with buttons
\n\nThe 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
\n\nMarkup
\n\n<!-- This is the container of the toggling buttons -->\n<div data-uk-switcher="{connect:'#my-id'}">\n <button class="uk-button" type="button">...</button>\n</div>\n\n<!-- This is the container of the content items -->\n<ul id="my-id" class="uk-switcher uk-margin">...</ul>\n\n<!-- This is the button group containing the toggling buttons -->\n<div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}">\n <button class="uk-button" type="button">...</button>\n</div>\n\n<!-- This is the container of the content items -->\n<ul id="my-id" class="uk-switcher uk-margin">...</ul>
\n\n \n\n
Switcher with navs
\n\nTo 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
\n\n \n\nMarkup
\n\n<div class="uk-grid">\n <div class="uk-width-medium-1-4">\n\n <!-- This is the nav containing the toggling elements -->\n <ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#my-id'}">\n <li><a href="">...</a></li>\n </ul>\n </div>\n <div class="uk-width-medium-3-4">\n\n <!-- This is the container of the content items -->\n <ul id="my-id" class="uk-switcher">\n <li>...</li>\n </ul>\n </div>\n</div>
\n\n \n\n
JavaScript options
\n\nThis is an example of how to set options via attribute:
\n\ndata-uk-switcher="{active:1}"
\n\n Option | \nPossible value | \nDefault | \nDescription | \n
---|---|---|---|
connect | \n CSS selector | \nfalse | \nRelated items container | \n
toggle | \n CSS selector | \n‘> *’ | \nToggle css selector, triggering content switching on click | \n
active | \n integer | \n0 | \nActive index on init | \n
animation | \n mixed | \nfalse | \nPredefined animation name or any uk-animation class name. | \n
Events
\n\nYou can bind callbacks to following events for custom functionality:
\n\nName | \nParameter | \nDescription | \n
---|---|---|
show.uk.switcher | \n event, active item | \nOn switcher item show/change | \n
Example
\n\n$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){\n console.log("Switcher switched to ", area);\n});
\n