Tabs - Documentation

new Tabs(element, options)

Source:

tabs.js, line 18

Parameters:

Name Type Description

element

HTMLElement

DOM element for component instantiation and scope

options

Object

Properties

Name	Type	Description
`containerSelector`	String	Selector for container element
`contentSelector`	String	Selector for tabs with content
`listSelector`	String	Selector for list element
`listItemsSelector`	String	Selector for tabs element
`moreButtonSelector`	String	Selector for more button element
`moreLabelSelector`	String	Selector for more button label element
`prevSelector`	String	Selector for prev element
`nextSelector`	String	Selector for next element
`attachClickListener`	Boolean
`attachResizeListener`	Boolean

Classes

Tabs

Members

onToggle

Description:

Sets the callback function to be executed on toggle.

Source:

tabs.js, line 558

Sets the callback function to be executed on toggle.

onToggle

Description:

Gets the callback function set for toggle events.

Source:

tabs.js, line 566

Gets the callback function set for toggle events.

Methods

arrowFocusToTab(currentTab, direction)

Source:

tabs.js, line 905

Parameters:

Name	Type	Description
`currentTab`	HTMLElement	tab element
`direction`	string	key arrow direction

closeMoreDropdown()

Description:

Close the dropdown.

Source:

tabs.js, line 802

destroy()

Description:

Destroy component.

Source:

tabs.js, line 366

handleClickOnTabs()

Description:

Hide and show content when clicking on a tab.

Source:

tabs.js, line 573

handleClickOnToggle()

Description:

Toggle the "more" dropdown.

Source:

tabs.js, line 474

handleClickOutside(e)

Description:

Handle click outside the dropdown to close it.

Source:

tabs.js, line 819

Parameters:

Name	Type	Description
`e`	Event

handleFocusOnTab(e)

Description:

Handle focus on a tab link - sync transform on mobile.

Source:

tabs.js, line 513

Parameters:

Name	Type	Description
`e`	Event

handleFocusOnToggle()

Description:

Handle focus on the "more" button - open dropdown and focus active item.

Source:

tabs.js, line 489

handleKeyboardOnTabs(e)

Source:

tabs.js, line 833

Parameters:

Name	Type	Description
`e`	Event

handleMouseDownOnToggle()

Description:

Track mouse interaction on the "more" button.

Source:

tabs.js, line 467

handleResize()

Description:

Trigger events on resize.

Source:

tabs.js, line 643

init()

Description:

Initialise component.

Source:

tabs.js, line 127

moveFocus(currentTab)

Source:

tabs.js, line 892

Parameters:

Name	Type	Description
`currentTab`	HTMLElement	tab element

on(eventName, callback) → {void}

Description:

Source:

tabs.js, line 347

Example

// Registering a callback for the 'onToggle' event
inpage.on('onToggle', (event) => {
  console.log('Toggle event occurred!', event);
});

Parameters:

Name	Type	Description
`eventName`	string	The name of the event to listen for.
`callback`	function	The callback function to be invoked when the event occurs.

Returns:

Type: void

openMoreDropdown()

Description:

Open the dropdown.

Source:

tabs.js, line 810

shiftTabs(dir)

Description:

Action to shift next or previous tabs on mobile format.

Source:

tabs.js, line 406

Parameters:

Name	Type	Description
`dir`	int \| string

tabsKeyEvents()

Description:

Bind key events on tabs for accessibility.

Source:

tabs.js, line 776

trigger(eventName, eventData)

Description:

Trigger a component event.

Source:

tabs.js, line 359

Parameters:

Name	Type	Description
`eventName`	string	The name of the event to trigger.
`eventData`	any	Data associated with the event.

(static) autoInit(root) → {Tabs}

Source:

tabs.js, line 27

Parameters:

Name	Type	Description
`root`	HTMLElement	DOM element for component instantiation and scope

Returns:

An instance of Tabs.

Type: Tabs