HexagonJS
Edit Page
Tabs
A tab layout component.
Examples
Tab 1
Tab 2
Tab 3
Stuff goes here 1
Stuff goes here 2
Stuff goes here 3

HTML

<div id="tabs" class="hx-tabs hx-flag-tabs">
  <div id="tab1" class="hx-tab" data-content="tab-content-1">Tab 1</div>
  <div id="tab2" class="hx-tab" data-content="tab-content-2">Tab 2</div>
  <div id="tab3" class="hx-tab" data-content="tab-content-3">Tab 3</div>
  <div class="hx-tabs-content demo-tabs-content-padded">
    <div id="tab-content-1" class="hx-tab-content">Stuff goes here 1</div>
    <div id="tab-content-2" class="hx-tab-content">Stuff goes here 2</div>
    <div id="tab-content-3" class="hx-tab-content">Stuff goes here 3</div>
  </div>
</div>

JavaScript

var tabs = new hx.Tabs('#tabs');
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7

HTML

<div id="tabs-script" class="hx-tabs hx-flag-tabs">
  <div id="tab1" class="hx-tab">Tab 1</div>
  <div id="tab2" class="hx-tab hx-action">Tab 2</div>
  <div id="tab3" class="hx-tab hx-positive">Tab 3</div>
  <div id="tab4" class="hx-tab hx-warning">Tab 4</div>
  <div id="tab5" class="hx-tab hx-negative">Tab 5</div>
  <div id="tab6" class="hx-tab hx-info">Tab 6</div>
  <div id="tab7" class="hx-tab hx-contrast">Tab 7</div>
  <div class="hx-tabs-content"></div>
</div>

JavaScript

var tabs = new hx.Tabs('#tabs-script');

tabs.on('change', function(data){
  hx.select('#tabs-script')
    .select('.hx-tabs-content')
      .text('Tab ' + (data.id+1) + ' selected')
});

tabs.select(0, true);

1.x tabs styles

Tab 1
Tab 2
Tab 3
Stuff goes here 1
Stuff goes here 2
Stuff goes here 3

HTML

<p class="hx-header-medium">1.x tabs styles</p>
<div id="tabs-old" class="hx-tabs">
  <div id="tab1" class="hx-tab" data-content="tab-content-1">Tab 1</div>
  <div id="tab2" class="hx-tab" data-content="tab-content-2">Tab 2</div>
  <div id="tab3" class="hx-tab" data-content="tab-content-3">Tab 3</div>
  <div class="hx-tabs-content demo-tabs-content-padded">
    <div id="tab-content-1" class="hx-tab-content">Stuff goes here 1</div>
    <div id="tab-content-2" class="hx-tab-content">Stuff goes here 2</div>
    <div id="tab-content-3" class="hx-tab-content">Stuff goes here 3</div>
  </div>
</div>

JavaScript

var tabs = new hx.Tabs('#tabs-old');
Api
Prototypes
hx.TabsextendsEventEmitter
A layout type for displaying multiple pieces of content in the same area of the page.
Constructors
hx.TabsselectionString / HTMLElement
Sets up a tabs layout.
Arguments
selectionString / HTMLElement
A unique css selector or a HTMLElement that identifies the tabs section.
Properties
selectedNumber
The index of the selected tab.
Events
change
Emitted when the selected tab is changed.
Methods
selectindexNumberforceBooleanTabs
Selects a tab by index.
Arguments
indexNumber
The index of the tab to select. This will reveal the content for that tab.
forceBoolean
By default selections that do not actually change the selected tab will be ignored. Supply true here to force the selection to be updated even if it is the same (and thus cause a 'change' event to be emitted).
Returns
Tabs
This Tabs
Classes
hx-flag-tabsadded
Applies the updated tabs style. The updates are intended to make the tabs more readable and easier to identify what tab is active.
The key differences are the removal of context class support, with all tabs using the same colour and border, and the addition of padding to the content area to ensure the tabs always line up with the content.
hx-tabs
The class to give to the tabs container
Classes
hx-tab
The class to give to each tab in the tabs container
Extra Classes
hx-action
Colors the tab with the action color.
hx-complement
Colors the tab with the complement color.
hx-contrast
Colors the tab with the contrast color.
hx-info
Colors the tab with the info color.
hx-negative
Colors the tab with the negative color.
hx-positive
Colors the tab with the positive color.
hx-warning
Colors the tab with the warning color.