EvoToolkit - v3.7.2 (Changelog)

Tabs

Tabs make it easy to explore and switch between different blocks of content.

If you include a tab's ID as a URL hash (For example /my-page#my-tab-name), the tab will automatically open on page load.

Source

Contributors

Luke Harrison

Mixes
A mix is a new component variant created using another. Listed below are mixes in other components involving the tabs.

  • Overview
  • Methods
  • Events
  • Theming

Table of contents

Base

Modifiers

Base

Standard

With the default tabs logic, when adding new tabs, make sure to add a matching c-tabs__content-item element to avoid errors.

  • Mercedes Benz
  • Audi
  • Range Rover
1
2
3
<div class='c-tabs'>
	<ul class='o-layout o-layout--flush o-layout--fit-height c-tabs__layout'>
		<li class='o-layout__item c-tabs__item is-active' tabindex='0'><div class='c-tabs__item-inner'>Mercedes Benz</div></li>
		<li class='o-layout__item c-tabs__item' tabindex='0'><div class='c-tabs__item-inner'>Audi</div></li>
		<li class='o-layout__item c-tabs__item' tabindex='0'><div class='c-tabs__item-inner'>Range Rover</div></li>
	</ul>
	<div class='c-tabs__content'>
		<div class='c-tabs__content-item is-active'>
			<div class='o-box u-p-small'>1</div>
		</div>
		<div class='c-tabs__content-item'>
			<div class='o-box u-p-small'>2</div>
		</div>
		<div class='c-tabs__content-item'>
			<div class='o-box u-p-small'>3</div>
		</div>
	</div>
</div>

External Content

For more complex tab structures, you can seperate tab content from tab label and have everything still work using the data-tabs attribute.

Simply add it to the c-tabs element, with the tab content class as its value.

  • Mercedes Benz
  • Audi
  • Range Rover
1
2
3
<div class="c-tabs" data-tabs="js-tabs-content">
	<ul class="o-layout o-layout--flush o-layout--fit-height c-tabs__layout">
		<li class="o-layout__item c-tabs__item is-active" tabindex="0"><div class="c-tabs__item-inner">Mercedes Benz</div></li>
		<li class="o-layout__item c-tabs__item" tabindex="0"><div class="c-tabs__item-inner">Audi</div></li>
		<li class="o-layout__item c-tabs__item" tabindex="0"><div class="c-tabs__item-inner">Range Rover</div></li>
	</ul>
</div>
<div class="c-tabs__content js-tabs-content">
	<div class="c-tabs__content-item is-active">
		<div class="o-box u-p-small">1</div>
	</div>
	<div class="c-tabs__content-item">
		<div class="o-box u-p-small">2</div>
	</div>
	<div class="c-tabs__content-item">
		<div class="o-box u-p-small">3</div>
	</div>
</div>

Modifiers

A list of modifiers for the tabs component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

Content Borders

Simply adds a border around the tabs content. This visual modifier helps the user to create more of an association between a tab and its content.

Note: This modifier isn't compatible with the 'Button' modifier, so they shouldn't be used together.

  • Mercedes Benz
  • Audi
  • Range Rover
1
2
3
<div class='c-tabs c-tabs--border'>
	<ul class='o-layout o-layout--flush o-layout--fit-height c-tabs__layout'>
		<li class='o-layout__item c-tabs__item is-active' tabindex='0'><div class='c-tabs__item-inner'>Mercedes Benz</div></li>
		<li class='o-layout__item c-tabs__item' tabindex='0'><div class='c-tabs__item-inner'>Audi</div></li>
		<li class='o-layout__item c-tabs__item' tabindex='0'><div class='c-tabs__item-inner'>Range Rover</div></li>
	</ul>
	<div class='c-tabs__content'>
		<div class='c-tabs__content-item is-active'>
			<div class='o-box u-p-small'>1</div>
		</div>
		<div class='c-tabs__content-item'>
			<div class='o-box u-p-small'>2</div>
		</div>
		<div class='c-tabs__content-item'>
			<div class='o-box u-p-small'>3</div>
		</div>
	</div>
</div>

Invert

Inverts the tab colours so they're more visible on a darker background.

  • Mercedes Benz
  • Audi
  • Range Rover
1
2
3
<div class='c-tabs c-tabs--invert'>
	<ul class='o-layout o-layout--flush o-layout--fit-height c-tabs__layout'>
		<li class='o-layout__item c-tabs__item is-active' tabindex='0'><div class='c-tabs__item-inner'>Mercedes Benz</div></li>
		<li class='o-layout__item c-tabs__item' tabindex='0'><div class='c-tabs__item-inner'>Audi</div></li>
		<li class='o-layout__item c-tabs__item' tabindex='0'><div class='c-tabs__item-inner'>Range Rover</div></li>
	</ul>
	<div class='c-tabs__content'>
		<div class='c-tabs__content-item is-active'>
			<div class='o-box u-p-small'>1</div>
		</div>
		<div class='c-tabs__content-item'>
			<div class='o-box u-p-small'>2</div>
		</div>
		<div class='c-tabs__content-item'>
			<div class='o-box u-p-small'>3</div>
		</div>
	</div>
</div>

Full Width

Gives each tab an equal width relative to the size of the containing element. There's no specific use case for this, other than you think it looks better.

  • Mercedes Benz
  • Audi
  • Range Rover
1
2
3
<div class='c-tabs c-tabs--full-width'>
	<ul class='o-layout o-layout--flush o-layout--fit-height c-tabs__layout'>
		<li class='o-layout__item c-tabs__item is-active' tabindex='0'><div class='c-tabs__item-inner'>Mercedes Benz</div></li>
		<li class='o-layout__item c-tabs__item' tabindex='0'><div class='c-tabs__item-inner'>Audi</div></li>
		<li class='o-layout__item c-tabs__item' tabindex='0'><div class='c-tabs__item-inner'>Range Rover</div></li>
	</ul>
	<div class='c-tabs__content'>
		<div class='c-tabs__content-item is-active'>
			<div class='o-box u-p-small'>1</div>
		</div>
		<div class='c-tabs__content-item'>
			<div class='o-box u-p-small'>2</div>
		</div>
		<div class='c-tabs__content-item'>
			<div class='o-box u-p-small'>3</div>
		</div>
	</div>
</div>

Collapse

This modifier allows us to make our tabs stack vertically until a certain breakpoint hits. This makes them more usuable on smaller screens.

Simply add the c-tabs--collapse@max-lg class, with the lg referencing your chosen breakpoint where this behaviour should cease.

  • Mercedes Benz
  • Audi
  • Range Rover
1
2
3
<div class='c-tabs c-tabs--collapse@max-lg'>
	<ul class='o-layout o-layout--flush o-layout--fit-height c-tabs__layout'>
		<li class='o-layout__item c-tabs__item is-active' tabindex='0'><div class='c-tabs__item-inner'>Mercedes Benz</div></li>
		<li class='o-layout__item c-tabs__item' tabindex='0'><div class='c-tabs__item-inner'>Audi</div></li>
		<li class='o-layout__item c-tabs__item' tabindex='0'><div class='c-tabs__item-inner'>Range Rover</div></li>
	</ul>
	<div class='c-tabs__content'>
		<div class='c-tabs__content-item is-active'>
			<div class='o-box u-p-small'>1</div>
		</div>
		<div class='c-tabs__content-item'>
			<div class='o-box u-p-small'>2</div>
		</div>
		<div class='c-tabs__content-item'>
			<div class='o-box u-p-small'>3</div>
		</div>
	</div>
</div>

This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector.

See JavaScript API for more information and a list of shared, global methods.

open

Makes whichever tab the event is fired from the active one.


												// You can pass DOM references
const myTabs = document.querySelector('.js-my-tabs');
const tabToShow = myTabs.querySelector('.js-my-chosen-tab');
evo(myTabs).tabs('open', {
	tab: tabToShow
})

// Or String selectors
evo('.js-my-tabs').tabs('open', {
	tab: '.js-my-chosen-tab'
})

// Or by tab number. This would open the first tab.
evo('.js-my-tabs').tabs('open', {
	tab: 1
})

next

Cycles the active tab forward.


												evo('.js-my-tabs').tabs('next');

prev

Cycles the active tab backwards


												evo('.js-my-tabs').tabs('prev');

This component has bespoke events which trigger automatically on certain actions. You can hook into these using event listeners to run your own custom code.

Typically, most events are fired from the block level class (eg:- c-tabs), however some may fire from element level classes (eg:- c-tabs__item). In practice, this usually doesn't matter as these element level events will bubble upwards and trigger any listeners on the block element. When this happens, you can get a reference to the element via the target property of the event object.

Events List

Name Description

open

Fires from a tab when it's opened. The tab can be identified in the e.target property.

close

Fires from a tab when it's closed. The tab can be identified in the e.target property.

Example code snippet showing how you can set up an event listener.


const element = document.querySelector('.c-my-component');
element.addEventListener('eventName', (e) => {
	console.log('my event has fired');
	// Access event details object, if it exists
	console.log(e.details);
	// Access the element the event was fired from
	console.log(e.target);
});

You can theme the tabs component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-tabs-color very-light
$component-tabs-border-color light
$component-tabs-accent-color primary
$component-tabs-focus-color very-light
$component-tabs-inverted-focus-color primary-dark