README.md

The tabs object

The tabs object is a simple abstraction for force a series of elements (usually a list) into an equal-width, tab-like format.

Install using npm:

    $ npm install --save-dev aleut.objects.tabs

Usage

Basic usage of the tabs object uses the required class:

<ul class="o-tabs">
	<li class="o-tabs__item"><a href="#" class="o-tabs__link">Foo</a></li>
	<li class="o-tabs__item"><a href="#" class="o-tabs__link">Bar</a></li>
	<li class="o-tabs__item"><a href="#" class="o-tabs__link">Baz</a></li>
</ul>

The only valid children of the .o-tabs node are .o-tabs__items.

Modify style

If you need to style the tabs more (as you probably do), it's recommended to make your own component (in its own file) that you style and add to the objects. For example:

<ul class="o-tabs c-tabs--primary">
	<li class="o-tabs__item"><a href="#" class="o-tabs__link">Foo</a></li>
	<li class="o-tabs__item"><a href="#" class="o-tabs__link">Bar</a></li>
	<li class="o-tabs__item"><a href="#" class="o-tabs__link">Baz</a></li>
</ul>