Class Tabs

Tabs component

Preserve

Hierarchy

  • GOVUKFrontendComponent
    • Tabs

Constructors

constructor

Properties

$module $tabList $tabListItems $tabs boundOnHashChange boundTabClick boundTabKeydown changingHash jsHiddenClass mql moduleName

Methods

activateNextTab activatePreviousTab checkMode createHistoryEntry getCurrentTab getPanel getTab hidePanel hideTab highlightTab onHashChange onTabClick onTabKeydown setAttributes setup setupResponsiveChecks showPanel showTab teardown unhighlightTab unsetAttributes

Constructors

constructor

Properties

Private$module

$module: Element

Private$tabList

$tabList: Element

Private$tabListItems

$tabListItems: NodeListOf<HTMLLIElement>

Private$tabs

$tabs: NodeListOf<HTMLAnchorElement>

PrivateboundOnHashChange

boundOnHashChange: (() => void)

Type declaration

    • (): void
    • Private

      Handle hashchange event

      Returns void

      Returns void, or undefined when prevented

PrivateboundTabClick

boundTabClick: ((event: MouseEvent) => void)

Type declaration

    • (event): void
    • Private

      Handle tab link clicks

      Parameters

      • event: MouseEvent

        Mouse click event

      Returns void

      Returns void

PrivateboundTabKeydown

boundTabKeydown: ((event: KeyboardEvent) => void)

Type declaration

    • (event): void
    • Private

      Handle tab keydown event

      • Press right/down arrow for next tab
      • Press left/up arrow for previous tab

      Parameters

      • event: KeyboardEvent

        Keydown event

      Returns void

PrivatechangingHash

changingHash: boolean = false

PrivatejsHiddenClass

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

Privatemql

mql: MediaQueryList = null

StaticmoduleName

moduleName: string = 'govuk-tabs'

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

Methods

PrivateactivateNextTab

PrivateactivatePreviousTab

PrivatecheckMode

PrivatecreateHistoryEntry

  • createHistoryEntry($tab): 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

PrivategetCurrentTab

PrivategetPanel

PrivategetTab

  • getTab(hash): HTMLAnchorElement
  • Private

    Get tab link by hash

    Parameters

    • hash: string

      Hash fragment including #

    Returns HTMLAnchorElement

    Tab link

PrivatehidePanel

PrivatehideTab

PrivatehighlightTab

PrivateonHashChange

PrivateonTabClick

PrivateonTabKeydown

  • onTabKeydown(event): void
  • Private

    Handle tab keydown event

    • Press right/down arrow for next tab
    • Press left/up arrow for previous tab

    Parameters

    • event: KeyboardEvent

      Keydown event

    Returns void

PrivatesetAttributes

Privatesetup

PrivatesetupResponsiveChecks

PrivateshowPanel

PrivateshowTab

Privateteardown

PrivateunhighlightTab

PrivateunsetAttributes

Settings

Member Visibility

On This Page

Constructors
Properties
Methods