Tabs

In groundhog since v0.1.1

Examples


<div class="tabs">
  <button class="tab">Tab 1</button>
  <button class="tab">Tab 2</button>
  <button class="tab">Tab 3</button>
  <button class="tab">Tab 4</button>
</div>


<div class="tabs">
  <button class="tab">Tab 1</button>
  <button class="tab is-disabled">Tab 2</button>
</div>


<div class="tabs">
  <button class="tab">Tab 1</button>
  <button class="tab is-active">Tab 2</button>
</div>


<div class="tabs tabs--error">
  <button class="tab"><span class="tabhighlight">1</span>/8 Hosts</button>
  <button class="tab"><span class="tabhighlight">1</span>/8 Hosts</button>
  <button class="tab is-active"><span class="tabhighlight">1</span>/8 Hosts</button>
  <button class="tab is-disabled"><span class="tabhighlight">1</span>/8 Hosts</button>
</div>

Tab 1 Tab 2 Tab 3 Tab 4


<div class="tabs tabs--error">
  <input class="tab__input" type="radio" id="tab01" name="tabs" />
  <label class="tab" for="tab01">Tab 1</label>
  <input class="tab__input" type="radio" id="tab02" name="tabs" checked />
  <label class="tab" for="tab02">Tab 2</label>
  <input class="tab__input" type="radio" id="tab03" name="tabs" />
  <label class="tab" for="tab03">Tab 3</label>
  <input class="tab__input" type="radio" id="tab04" name="tabs" disabled/>
  <label class="tab" for="tab04">Tab 4</label>
</div>


<div class="theme--blue">
  <div class="tabs">
    <button class="tab"><span class="tabhighlight">1</span>/8 Hosts</button>
    <button class="tab is-active"><span class="tabhighlight">1</span>/8 Hosts</button>
    <button class="tab is-disabled"><span class="tabhighlight">1</span>/8 Hosts</button>
  </div>
</div>


<div class="theme--turquoise">
  <div class="tabs">
    <button class="tab"><span class="tabhighlight">1</span>/8 Hosts</button>
    <button class="tab is-active"><span class="tabhighlight">1</span>/8 Hosts</button>
    <button class="tab is-disabled"><span class="tabhighlight">1</span>/8 Hosts</button>
  </div>
</div>


<div class="theme--purple">
  <div class="tabs">
    <button class="tab"><span class="tabhighlight">1</span>/8 Hosts</button>
    <button class="tab is-active"><span class="tabhighlight">1</span>/8 Hosts</button>
    <button class="tab is-disabled"><span class="tabhighlight">1</span>/8 Hosts</button>
  </div>
</div>


<div class="theme--royalblue">
  <div class="tabs">
    <button class="tab"><span class="tabhighlight">1</span>/8 Hosts</button>
    <button class="tab is-active"><span class="tabhighlight">1</span>/8 Hosts</button>
    <button class="tab is-disabled"><span class="tabhighlight">1</span>/8 Hosts</button>
  </div>
</div>

Introduction

The Groundhog tabs component visually enhances the standard html <input type="radio"> or <button> element. Tabs usually control visibility of multiple panes, which are usually contextually related to each other. A tab contains a heading or icon, which is representative for the content of the pane it controls.

Including the tabs component with buttons

To create a Groundhog tabs component, first create a containing <div> element, which holds a series of button elements.
```
<div>
<button>Tab 1</button>
<button>Tab 2</button>
</div>
```

To visually enhance the buttons, add the appropriate classes to the class attributes of the elements:

<div class="tabs">
<button class="tab">Tab 1</button>
<button class="tab">Tab 2</button>
</div>

Set one of the tabs active by adding is-active to the class attribute:

<div class="tabs">
<button class="tab is-active">Tab 1</button>
<button class="tab">Tab 2</button>
</div>

Including the tabs component with inputs

To create a Groundhog tabs component, first create a containing <div> element, which holds a series of <input type="radio"> and <label> elements.
```
<div>
<input type="radio" />
<label>Tab 1</label>
<input type="radio" />
<label>Tab 2</label>
</div>
```

To visually enhance the buttons, add the appropriate classes to the class attributes of the elements:

<div class="tabs">
<input class="tab__input" type="radio" />
<label class="tab">Tab 1</label>
<input class="tab__input" type="radio" />
<label class="tab">Tab 2</label>
</div>

Set one of the tabs active by adding the checked attribute to the <input> element:

<div class="tabs">
<input class="tab__input" type="radio" />
<label class="tab">Tab 1</label>
<input class="tab__input" type="radio" checked/>
<label class="tab">Tab 2</label>
</div>

Link the <input> and <label> elements together by adding the appropriate id and for attributes:

<div class="tabs">
<input class="tab__input" type="radio" id="tab01"/>
<label class="tab" for="tab01">Tab 1</label>
...
</div>

Available classes

Theme classes for tabs

class name	effect
`theme--turquoise`	Tabs in turquoise (default)
`theme--blue`	Tabs in blue
`theme--purple`	Tabs in purple
`theme--royalblue`	Tabs in royalblue

Modifier classes for tabs

class name	effect
`tabs--error`	Tabs in red for error states (overrides themeing)

Available classes for `<button>`

class name	effect
`is-active`	Will select the tab by default
`is-disabled`	Sets the tab as disabled

Available attributes for `<input type="radio">`

attribute name	effect
`checked`	Will select the tab by default
`disabled`	Sets the tab as disabled

Notes about Groundhog tabs

Tabs work with <button> and <input type="radio" /> elements. When using the button approach javascript will set the .is-active class on the appropriate button. Using the <input type="radio /> + label markup, the styling will happen via checked and disabled properties on the <input> element itself.

Pane visibility control is currently not contained in Groundhog.