Tabs componentAvailable since EcoComposer 1.2

• First tab
• Second tab
• Third tab
• Fourth tab

The defaults values are :

'animate' : true,
'background': true,
'border' : null,
'divs--font-size' : 1.6rem * theming.$font-size,
'divs--margin-bottom' : 4rem * theming.$font-size,
'tabs--font-size' : 1.6rem * theming.$font-size,
'tabs--background-color': 'tabs--background-color',
'tabs--background-image': 'tabs--background-image',
'tabs--hover--background-color': 'tabs--hover--background-color',
'tabs--hover--background-image': 'tabs--hover--background-image',
'tabs--border--color' : 'tabs--border--color',
'tabs--color' : 'tabs--color',
'tabs--div--background' : 'tabs--div--background',
'tabs--div--box-shadow' : 'tabs--div--box-shadow',
'count' : 4,
'print' : false,
'suffix' : '',
'themes' : (
  'light' : (
    'default--tabs--background-color' : #ddd,
    'default--tabs--background-image' : linear-gradient(45deg, #e0e6e6, #b9dada),
    'default--tabs--hover--background-color' : #ddf,
    'default--tabs--hover--background-image' : linear-gradient(45deg, #e0e6e6, #b9dada),
    'default--tabs--border--color' : #f00,
    'default--tabs--color' : #000,
    'default--tabs--div--background' : #eee,
    'default--tabs--div--box-shadow' : 0 0 3px #000
  ),
  'dark' : (
    'default--tabs--background-color' : #ddd,
    'default--tabs--background-image' : linear-gradient(45deg, #e0e6e6, #b9dada),
    'default--tabs--hover--background-color' : #ddf,
    'default--tabs--hover--background-image' : linear-gradient(45deg, #e0e6e6, #b9dada),
    'default--tabs--border--color' : #fff,
    'default--tabs--color' : #000,
    'default--tabs--div--background' : #333,
    'default--tabs--div--box-shadow' : 0 0 3px #000
  )
)

We can implement it that way :

@include tabs.init;
@include tabs.create;
@include tabs.create(
  (
    'count' : 4,
    'themes' : $themes,
    'border-radius' : 0 0 .5rem .5rem
  )
);

We can implement it that way :

<input type=radio id=first-tab class="tabs-radios suffix" name=gallery checked> <input type=radio id=second-tab class="tabs-radios suffix" name=gallery> <input type=radio id=third-tab class="tabs-radios suffix" name=gallery> <input type=radio id=fourth-tab class="tabs-radios suffix" name=gallery> <ul class="tabs suffix"> <li class="tabs--item suffix" role=tab> <label for=first-tab class="tab--item-label suffix"> First tab </label> </li> <li class="tabs--item suffix" role=tab> <label for=second-tab class="tab--item-label suffix"> Second tab </label> </li> <li class="tabs--item suffix" role=tab> <label for=third-tab class="tab--item-label suffix"> Third tab </label> </li> <li class="tabs--item suffix" role=tab> <label for=fourth-tab class="tab--item-label suffix"> Fourth tab </label> </li> </ul> <div class="activatable-divs suffix"> <div class="activatable-divs--item suffix"> The first content. </div> <div class="activatable-divs--item suffix"> The second content. </div> <div class="activatable-divs--item suffix"> The third content. </div> <div class="activatable-divs--item suffix"> The fourth content. </div> </div>