Class Tabs

Tabs component

Hierarchy (View Summary)

Component
- Tabs

Constructors

constructor

new Tabs($root: Element): Tabs
Parameters
- $root: 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: () => void

Type declaration

- (): void
- Private
  Handle hashchange event
  
  Returns 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: 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 GOVUKFrontendComponent.$root
- Defined in govuk/govuk-frontend-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(): HTMLAnchorElement
Private
Get current tab link

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

`Private`getPanel

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

`Private`getTab

getTab(hash: string): HTMLAnchorElement
Private
Get tab link by hash
Parameters
- hash: string
  Hash fragment including #
Returns 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(): void
Private
Handle hashchange event

Returns 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/govuk-frontend-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 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 HTMLAnchorElement

PrivategetPanel

Parameters

Returns Element

PrivategetTab

Parameters

Returns HTMLAnchorElement

PrivatehidePanel

Parameters

Returns void

PrivatehideTab

Parameters

Returns void

PrivatehighlightTab

Parameters

Returns void

PrivateonHashChange

Returns 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