Tab

Description

Tabs are kind of like togglers, but only one tab is active at a time. When you enable the state of one tab, another tab is disabled.

Attributes

Basic Advanced JavaScript

data-ur-set="tabs": add this attribute to a div that wraps the whole interaction
data-ur-tabs-component="button": add this attribute to the button div
data-ur-tabs-component="content": add this attribute to the content
data-ur-tab-id="NAME": this attribute needs to link the button and the content (i.e. the button and content should have the same id)

Required


                  
                    
                      data-ur-set="tabs"

multiple?: false
state: N/A
attributes (default settings are in italics)
- optional: data-ur-closeable: enabled/disabled (allow all tabs to be closed at the same time)


                  
                    
                      data-ur-tabs-component="button"

add this attribute to the button (i.e. the thing to be clicked)
multiple?: true
state: enabled / disabled(default)
attributes
- required: data-ur-tab-id is required and must match the attribute on the content element


                  
                    
                      data-ur-tabs-component="content"

add this attribute to each content item
multiple?: true
state: enabled / disabled(default)
attributes
- required: data-ur-tab-id is required and must match the attribute on the button element

You can also directly initialize the widget in JavaScript (components can be passed in as strings/elements/arrays):

Uranium.lib.tabs({
  set: "#a",
  tabs: {
    tab1: { button: "#b", content: "#c" },
    tab2: { button: "#d", content: "#e" }
  }
},
{
  closeable: true // data-ur-* options
});

Example

First

Second

Third

First tab content

Second tab content

Third tab content

The Code

    <div data-ur-set="tabs">
      <div data-ur-tabs-component="button" data-ur-tab-id="one" data-ur-state="enabled">First</div>
      <div data-ur-tabs-component="button" data-ur-tab-id="two">Second</div>
      <div data-ur-tabs-component="button" data-ur-tab-id="three">Third</div>
      <div data-ur-tabs-component="content" data-ur-tab-id="one" data-ur-state="enabled">
        First tab content
      </div>
      <div data-ur-tabs-component="content" data-ur-tab-id="two">
        Second tab content
      </div>
      <div data-ur-tabs-component="content" data-ur-tab-id="three">
        Third tab content
      </div>
    </div>

Recommended Styles

SCSS CSS

    /* Recommended SCSS Styling */
    
    [data-ur-tabs-component="content"] {
      display: none;
      &[data-ur-state="enabled"] {
        display: block;
      }
    }

    /* Recommended CSS Styling */

    [data-ur-tabs-component="content"] {
      display: none;
    }
    [data-ur-tabs-component="content"][data-ur-state="enabled"] {
      display: block;
    }

Tabs Examples

Selecting the Second Tab

Here, as proof of principle, we're putting the data-ur-state="enabled" attribute on the second tab to illustrate that a different tab can be selected at the outset.

Example The Code

First

Second

Third

First tab content

Second tab content

Third tab content

    <div data-ur-set="tabs">
      <div data-ur-tabs-component="button" data-ur-tab-id="first">First</div>
      <div data-ur-tabs-component="button" data-ur-tab-id="second" data-ur-state="enabled">Second</div>
      <div data-ur-tabs-component="button" data-ur-tab-id="third">Third</div>
      <div data-ur-tabs-component="content" data-ur-tab-id="first">
        First tab content
      </div>
      <div data-ur-tabs-component="content" data-ur-tab-id="second" data-ur-state="enabled">
        Second tab content
      </div>
      <div data-ur-tabs-component="content" data-ur-tab-id="third">
        Third tab content
      </div>
    </div>

Accordions with State

So far, we've set one of the tabs to be enabled at the start. However, this isn't strictly necessary. In the following example, we start out with no states defined, so all tabs start out closed.

The first tab we click on will be the first one to be "enabled". And we've set the attribute data-ur-closeable to "enabled" on this tab set to allow the accordian to be collapsed back to its original state by clicking again on the open tab.

Example The Code

First

Oh Uranium.

Second

You do nifty interactions.

Third

And you're performant.

    <div data-ur-set="tabs" data-ur-closeable="enable">
      <div data-ur-tabs-component="button" data-ur-tab-id="first">First</div>
      <div data-ur-tabs-component="content" data-ur-tab-id="first">Oh Uranium.</div>
      <div data-ur-tabs-component="button" data-ur-tab-id="second">Second</div>
      <div data-ur-tabs-component="content" data-ur-tab-id="second">You do nifty interactions.</div>
      <div data-ur-tabs-component="button" data-ur-tab-id="third">Third</div>
      <div data-ur-tabs-component="content" data-ur-tab-id="third">And you're performant.</div>
    </div>