Class Tabs

Tabs component

Hierarchy (View Summary)

Component
- Tabs

Constructors

constructor

new Tabs($root: null | Element): Tabs
Parameters
- $root: null | Element
  HTML element to use for tabs
Returns Tabs
Overrides Component.constructor
- Defined in govuk/components/tabs/tabs.mjs:44

Properties

`Protected`_$root

_$root: HTMLElement

`Private`$tabList

$tabList: Element

`Private`$tabListItems

$tabListItems: NodeListOf<HTMLLIElement>

`Private`$tabs

$tabs: NodeListOf<HTMLAnchorElement>

`Private`boundOnHashChange

boundOnHashChange: () => undefined | void

Type Declaration

- (): undefined | void
- Private
  Handle hashchange event
  
  Returns undefined | void
  Returns void, or undefined when prevented

`Private`boundTabClick

boundTabClick: (event: MouseEvent) => void

Type Declaration

- (event: MouseEvent): void
- Private
  Handle tab link clicks
  Parameters
  - event: MouseEvent
    Mouse click event
  Returns void
  Returns void

`Private`boundTabKeydown

boundTabKeydown: (event: KeyboardEvent) => void

Type Declaration

- (event: KeyboardEvent): void
- Private
  Handle tab keydown event
  - Press right arrow for next tab
  - Press left arrow for previous tab
  Parameters
  - event: KeyboardEvent
    Keydown event
  Returns void

`Private`changingHash

changingHash: boolean = false

`Private`jsHiddenClass

jsHiddenClass: string = 'govuk-tabs__panel--hidden'

`Private`mql

mql: null | MediaQueryList = null

`Static`elementType

elementType: new () => Element = HTMLElement

`Static`moduleName

moduleName: string = 'govuk-tabs'

Name for the component used when initialising using data-module attributes.

Accessors

`Protected`$root

get $root(): RootElementType
Protected
Returns the root element of the component

Returns RootElementType
- the root element of component
Inherited from Component.$root
- Defined in govuk/component.mjs:27

Methods

`Private`activateNextTab

activateNextTab(): void
Private
Activate next tab

Returns void
- Defined in govuk/components/tabs/tabs.mjs:383

`Private`activatePreviousTab

activatePreviousTab(): void
Private
Activate previous tab

Returns void
- Defined in govuk/components/tabs/tabs.mjs:410

`Private`checkMode

checkMode(): void
Private
Setup or teardown handler for viewport resize check

Returns void
- Defined in govuk/components/tabs/tabs.mjs:123

`Private`createHistoryEntry

createHistoryEntry($tab: HTMLAnchorElement): void
Private
Update browser URL hash fragment for tab
- Allows back/forward to navigate tabs
- Avoids page jump when hash changes
Parameters
- $tab: HTMLAnchorElement
  Tab link
Returns void
- Defined in govuk/components/tabs/tabs.mjs:338

`Private`getCurrentTab

getCurrentTab(): null | HTMLAnchorElement
Private
Get current tab link

Returns null | HTMLAnchorElement
Tab link
- Defined in govuk/components/tabs/tabs.mjs:517

`Private`getPanel

getPanel($tab: HTMLAnchorElement): null | Element
Private
Get tab panel for tab link
Parameters
- $tab: HTMLAnchorElement
  Tab link
Returns null | Element
Tab panel
- Defined in govuk/components/tabs/tabs.mjs:440

`Private`getTab

getTab(hash: string): null | HTMLAnchorElement
Private
Get tab link by hash
Parameters
- hash: string
  Hash fragment including #
Returns null | HTMLAnchorElement
Tab link
- Defined in govuk/components/tabs/tabs.mjs:248

`Private`hidePanel

hidePanel($tab: HTMLAnchorElement): void
Private
Hide tab panel for tab link
Parameters
- $tab: HTMLAnchorElement
  Tab link
Returns void
- Defined in govuk/components/tabs/tabs.mjs:470

`Private`hideTab

hideTab($tab: HTMLAnchorElement): void
Private
Hide panel for tab link
Parameters
- $tab: HTMLAnchorElement
  Tab link
Returns void
- Defined in govuk/components/tabs/tabs.mjs:225

`Private`highlightTab

highlightTab($tab: HTMLAnchorElement): void
Private
Set 'selected' state for tab link
Parameters
- $tab: HTMLAnchorElement
  Tab link
Returns void
- Defined in govuk/components/tabs/tabs.mjs:501

`Private`onHashChange

onHashChange(): undefined | void
Private
Handle hashchange event

Returns undefined | void
Returns void, or undefined when prevented
- Defined in govuk/components/tabs/tabs.mjs:195

`Private`onTabClick

onTabClick(event: MouseEvent): void
Private
Handle tab link clicks
Parameters
- event: MouseEvent
  Mouse click event
Returns void
Returns void
- Defined in govuk/components/tabs/tabs.mjs:314

`Private`onTabKeydown

onTabKeydown(event: KeyboardEvent): void
Private
Handle tab keydown event
- Press right arrow for next tab
- Press left arrow for previous tab
Parameters
- event: KeyboardEvent
  Keydown event
Returns void
- Defined in govuk/components/tabs/tabs.mjs:362

`Private`setAttributes

setAttributes($tab: HTMLAnchorElement): void
Private
Set tab link and panel attributes
Parameters
- $tab: HTMLAnchorElement
  Tab link
Returns void
- Defined in govuk/components/tabs/tabs.mjs:258

`Private`setup

setup(): void
Private
Setup tab component

Returns void
- Defined in govuk/components/tabs/tabs.mjs:136

`Private`setupResponsiveChecks

setupResponsiveChecks(): void
Private
Setup viewport resize check

Returns void
- Defined in govuk/components/tabs/tabs.mjs:92

`Private`showPanel

showPanel($tab: HTMLAnchorElement): void
Private
Show tab panel for tab link
Parameters
- $tab: HTMLAnchorElement
  Tab link
Returns void
- Defined in govuk/components/tabs/tabs.mjs:455

`Private`showTab

showTab($tab: HTMLAnchorElement): void
Private
Show panel for tab link
Parameters
- $tab: HTMLAnchorElement
  Tab link
Returns void
- Defined in govuk/components/tabs/tabs.mjs:236

`Private`teardown

teardown(): void
Private
Teardown tab component

Returns void
- Defined in govuk/components/tabs/tabs.mjs:169

`Private`unhighlightTab

unhighlightTab($tab: HTMLAnchorElement): void
Private
Unset 'selected' state for tab link
Parameters
- $tab: HTMLAnchorElement
  Tab link
Returns void
- Defined in govuk/components/tabs/tabs.mjs:485

`Private`unsetAttributes

unsetAttributes($tab: HTMLAnchorElement): void
Private
Unset tab link and panel attributes
Parameters
- $tab: HTMLAnchorElement
  Tab link
Returns void
- Defined in govuk/components/tabs/tabs.mjs:288

`Static`checkSupport

checkSupport(): void
Validates whether components are supported

Returns void
Throws
when the components are not supported
Inherited from Component.checkSupport
- Defined in govuk/component.mjs:99

Class Tabs

Hierarchy (View Summary)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Tabs

Properties

Protected_$root

Private$tabList

Private$tabListItems

Private$tabs

PrivateboundOnHashChange

Type Declaration

Returns undefined | void

PrivateboundTabClick

Type Declaration

Parameters

Returns void

PrivateboundTabKeydown

Type Declaration

Parameters

Returns void

PrivatechangingHash

PrivatejsHiddenClass

Privatemql

StaticelementType

StaticmoduleName

Accessors

Protected$root

Returns RootElementType

Methods

PrivateactivateNextTab

Returns void

PrivateactivatePreviousTab

Returns void

PrivatecheckMode

Returns void

PrivatecreateHistoryEntry

Parameters

Returns void

PrivategetCurrentTab

Returns null | HTMLAnchorElement

PrivategetPanel

Parameters

Returns null | Element

PrivategetTab

Parameters

Returns null | HTMLAnchorElement

PrivatehidePanel

Parameters

Returns void

PrivatehideTab

Parameters

Returns void

PrivatehighlightTab

Parameters

Returns void

PrivateonHashChange

Returns undefined | void

PrivateonTabClick

Parameters

Returns void

PrivateonTabKeydown

Parameters

Returns void

PrivatesetAttributes

Parameters

Returns void

Privatesetup

Returns void

PrivatesetupResponsiveChecks

Returns void

PrivateshowPanel

Parameters

Returns void

`Protected`_$root

`Private`$tabList

`Private`$tabListItems

`Private`$tabs

`Private`boundOnHashChange

`Private`boundTabClick

`Private`boundTabKeydown

`Private`changingHash

`Private`jsHiddenClass

`Private`mql

`Static`elementType

`Static`moduleName

`Protected`$root

`Private`activateNextTab

`Private`activatePreviousTab

`Private`checkMode

`Private`createHistoryEntry

`Private`getCurrentTab

`Private`getPanel

`Private`getTab

`Private`hidePanel

`Private`hideTab

`Private`highlightTab

`Private`onHashChange

`Private`onTabClick

`Private`onTabKeydown

`Private`setAttributes

`Private`setup

`Private`setupResponsiveChecks

`Private`showPanel

`Private`showTab

`Private`teardown

`Private`unhighlightTab

`Private`unsetAttributes

`Static`checkSupport