# switcher

The markup of every demo on <https://kuiper.oeds.it/switcher/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## default

The component with no options set -- what the markup alone gives you, before any parameter is tuned. Read this one first: every other panel on the page is a departure from it.

Varies: 8 specimens.

```html
<div data-grid data-switcher class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card">
   <div data-grid data-switcher-toggle-items class="grid-xs">
    <div class="width-auto" data-switcher-toggle-item>
     <div class="card">
      <button data-switcher-toggle-item-button>one</button>
     </div>
    </div>
    <div class="width-auto" data-switcher-toggle-item>
     <div class="card">
      <button data-switcher-toggle-item-button>two</button>
     </div>
    </div>
    <div class="width-auto" data-switcher-toggle-item>
     <div class="card">
      <button data-switcher-toggle-item-button>three</button>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card overflow-hidden">
   <div class="grid-xs grid-collapse" data-grid data-switcher-items>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt quam at volutpat facilisis. Phasellus vel nulla sed neque finibus sagittis. Praesent eget nunc arcu. Vivamus nec suscipit ex, quis tincidunt urna. Suspendisse elit nisi, faucibus in elit lacinia, tempor hendrerit quam. Morbi bibendum elit sit amet magna ultricies fermentum. Duis in hendrerit augue. Donec nec tempus nibh, vitae euismod velit. Aliquam at lacinia nisl. Donec varius turpis non cursus hendrerit.</p>
     </div>
    </div>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Phasellus vel nulla sed neque finibus sagittis. Praesent eget nunc arcu. Vivamus nec suscipit ex, quis tincidunt urna. Suspendisse elit nisi, faucibus in elit lacinia, tempor hendrerit quam. Morbi bibendum elit sit amet magna ultricies fermentum. Duis in hendrerit augue. Donec nec tempus nibh, vitae euismod velit. Aliquam at lacinia nisl. Donec varius turpis non cursus hendrerit.</p>
     </div>
    </div>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Suspendisse elit nisi, faucibus in elit lacinia, tempor hendrerit quam. Morbi bibendum elit sit amet magna ultricies fermentum. Duis in hendrerit augue. Donec nec tempus nibh, vitae euismod velit. Aliquam at lacinia nisl. Donec varius turpis non cursus hendrerit.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```

## animation

The entrance animation. It is only observable WHILE it runs: read at rest every specimen reports `animation-name: none`, because the class arms the animation and the trigger starts it.

Varies: 8 specimens.

```html
<div data-grid data-switcher="animation: animation-slide-bottom, animation-slide-right; duration: 300;" class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card">
   <div data-grid data-switcher-toggle-items class="grid-xs">
    <div class="width-auto" data-switcher-toggle-item>
     <div class="card">
      <button data-switcher-toggle-item-button>one</button>
     </div>
    </div>
    <div class="width-auto" data-switcher-toggle-item>
     <div class="card">
      <button data-switcher-toggle-item-button>two</button>
     </div>
    </div>
    <div class="width-auto" data-switcher-toggle-item>
     <div class="card">
      <button data-switcher-toggle-item-button>three</button>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card overflow-hidden">
   <div class="grid-xs grid-collapse" data-grid data-switcher-items>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt quam at volutpat facilisis. Phasellus vel nulla sed neque finibus sagittis. Praesent eget nunc arcu. Vivamus nec suscipit ex, quis tincidunt urna. Suspendisse elit nisi, faucibus in elit lacinia, tempor hendrerit quam. Morbi bibendum elit sit amet magna ultricies fermentum. Duis in hendrerit augue. Donec nec tempus nibh, vitae euismod velit. Aliquam at lacinia nisl. Donec varius turpis non cursus hendrerit.</p>
     </div>
    </div>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Phasellus vel nulla sed neque finibus sagittis. Praesent eget nunc arcu. Vivamus nec suscipit ex, quis tincidunt urna. Suspendisse elit nisi, faucibus in elit lacinia, tempor hendrerit quam. Morbi bibendum elit sit amet magna ultricies fermentum. Duis in hendrerit augue. Donec nec tempus nibh, vitae euismod velit. Aliquam at lacinia nisl. Donec varius turpis non cursus hendrerit.</p>
     </div>
    </div>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Suspendisse elit nisi, faucibus in elit lacinia, tempor hendrerit quam. Morbi bibendum elit sit amet magna ultricies fermentum. Duis in hendrerit augue. Donec nec tempus nibh, vitae euismod velit. Aliquam at lacinia nisl. Donec varius turpis non cursus hendrerit.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```

## switcher &amp; button-tab

Varies: 8 specimens.

```html
<div class="grid-xs grid-collapse" data-grid data-switcher>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid data-switcher-toggle-items>
    <div class="width-expand" data-switcher-toggle-item><div class="card"><button class="button button-tab width-1-1" data-switcher-toggle-item-button>one</button></div></div>
    <div class="width-expand" data-switcher-toggle-item><div class="card"><button class="button button-tab width-1-1" data-switcher-toggle-item-button>two</button></div></div>
    <div class="width-expand" data-switcher-toggle-item><div class="card"><button class="button button-tab width-1-1" data-switcher-toggle-item-button>three</button></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card overflow-hidden">
   <div class="grid-collapse" data-switcher-items>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt quam at volutpat facilisis. Phasellus vel nulla sed neque finibus sagittis.</p>
     </div>
    </div>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Phasellus vel nulla sed neque finibus sagittis. Praesent eget nunc arcu. Vivamus nec suscipit ex, quis tincidunt urna.</p>
     </div>
    </div>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Suspendisse elit nisi, faucibus in elit lacinia, tempor hendrerit quam. Morbi bibendum elit sit amet magna ultricies fermentum.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```

## switcher &amp; button-tab

Varies: 9 specimens.

```html
<div class="grid-xs grid-collapse" data-grid data-switcher>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card">
   <div class="grid-2" data-grid data-switcher-toggle-items>
    <div class="width-auto" data-switcher-toggle-item><div class="card background-white border border-remove-bottom"><button class="button button-tab button-rectangle" data-switcher-toggle-item-button>one</button></div></div>
    <div class="width-auto" data-switcher-toggle-item><div class="card background-white border border-remove-bottom"><button class="button button-tab button-rectangle" data-switcher-toggle-item-button>two</button></div></div>
    <div class="width-auto" data-switcher-toggle-item><div class="card background-white border border-remove-bottom"><button class="button button-tab button-rectangle" data-switcher-toggle-item-button>three</button></div></div>
    <div class="width-expand"></div>
   </div>
  </div>
 </div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl">
  <div class="card overflow-hidden">
   <div class="grid-collapse" data-switcher-items>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt quam at volutpat facilisis. Phasellus vel nulla sed neque finibus sagittis.</p>
     </div>
    </div>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Phasellus vel nulla sed neque finibus sagittis. Praesent eget nunc arcu. Vivamus nec suscipit ex, quis tincidunt urna.</p>
     </div>
    </div>
    <div class="width-1-1" data-switcher-item>
     <div class="card background-white padding-xs border">
      <p>Suspendisse elit nisi, faucibus in elit lacinia, tempor hendrerit quam. Morbi bibendum elit sit amet magna ultricies fermentum.</p>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```