# 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

- Hello!
- Hello again!
- Bazinga!

### 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

- Hello!
- Hello again!
- Bazinga!

### 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

- Tab
- Tab
- Tab

- Hello!
- Hello again!
- Bazinga!

- Hello!
- Hello again!
- Bazinga!

- Tab
- Tab
- Tab

### 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

- Tab
- Tab
- Tab

- Hello!
- Hello again!
- Bazinga!

- Tab
- Tab
- Tab

- Hello!
- Hello again!
- Bazinga!

#### 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

Link

- Hello!
- Hello again!
- Bazinga!

Link

- Hello!
- Hello again!
- Bazinga!

### 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

- Hello!
- Hello again!
- Bazinga!

### 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.
`swiping` | boolean | true | Enable/disable content change on swipe

### 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);
    });