Tabs

API

Tabs

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.listSelector String Selector for list element (optional, default '.ecl-tabs__list')
  • options.listItemsSelector String Selector for tabs element (optional, default '.ecl-tabs__item:not(.ecl-tabs__item--more)')
  • options.moreButtonSelector String Selector for more button element (optional, default '.ecl-tabs__toggle')
  • options.moreLabelSelector String Selector for more button label element (optional, default '.ecl-tabs__toggle .ecl-button__label')
  • options.prevSelector String Selector for prev element (optional, default '.ecl-tabs__prev')
  • options.nextSelector String Selector for next element (optional, default '.ecl-tabs__next')
  • options.attachClickListener Boolean (optional, default true)
  • options.attachResizeListener Boolean (optional, default true)
  • options.moreItemSelector (optional, default '.ecl-tabs__item--more')

init

Initialise component.

destroy

Destroy component.

shiftTabs

Action to shift next or previous tabs on mobile format.

Parameters

• dir (int | string)

handleClickOnToggle

Toggle the "more" dropdown.

handleResize

Trigger events on resize.

tabsKeyEvents

Bind key events on tabs for accessibility.

closeMoreDropdown

Close the dropdown.

Parameters

• e Event

handleKeyboardOnTabs

Parameters

• e Event

moveFocus

Parameters

• currentTab HTMLElement tab element

arrowFocusToTab

Parameters

• currentTab HTMLElement tab element
• direction string key arrow direction

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope

• $1 Object (optional, default {})

  • $1.TABS (optional, default {})

Returns Tabs An instance of Tabs.

Setup

There are 2 ways to initialise the component.

Automatic

Add data-ecl-auto-init="Tabs" attribute to component's markup:

<div class="ecl-tabs" data-ecl-tabs data-ecl-auto-init="Tabs">...</div>

Use the ECL library's autoInit() (ECL.autoInit()) when your page is ready or other custom event you want to hook onto.

Manual

Get target element, create an instance and invoke init().

Given you have 1 element with an attribute data-ecl-tabs on the page:

var elt = document.querySelector('[data-ecl-tabs]');
var tabs = new ECL.Tabs(elt);
tabs.init();