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>

Private boundOnHashChange

boundOnHashChange: (() => void)

Type declaration

    • (): void

    • Returns void

Private boundTabClick

boundTabClick: ((event) => void)

Type declaration

    • (event): void

    • Parameters

      • event: MouseEvent

      Returns void

Private boundTabKeydown

boundTabKeydown: ((event) => void)

Type declaration

    • (event): void

    • Parameters

      • event: KeyboardEvent

      Returns void

Private changingHash

changingHash: boolean = false

Private jsHiddenClass

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

Private mql

mql: MediaQueryList = null

Static moduleName

moduleName: string = 'govuk-tabs'

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

Methods

Private activateNextTab

Private activatePreviousTab

Private checkMode

Private createHistoryEntry

  • 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

Private getCurrentTab

Private getPanel

  • getPanel($tab): Element
  • Private

    Get tab panel for tab link

    Parameters

    • $tab: HTMLAnchorElement

      Tab link

    Returns Element

    Tab panel

Private getTab

  • getTab(hash): HTMLAnchorElement
  • Private

    Get tab link by hash

    Parameters

    • hash: string

      Hash fragment including #

    Returns HTMLAnchorElement

    Tab link

Private hidePanel

Private hideTab

Private highlightTab

Private onHashChange

Private onTabClick

Private onTabKeydown

  • 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

Private setAttributes

Private setup

Private setupResponsiveChecks

Private showPanel

Private showTab

Private teardown

Private unhighlightTab

Private unsetAttributes

  • unsetAttributes($tab): void
  • Private

    Unset tab link and panel attributes

    Parameters

    • $tab: HTMLAnchorElement

      Tab link

    Returns void

Settings

Member Visibility

Theme

On This Page

constructor$module$tabList$tabListItems$tabsboundOnHashChangeboundTabClickboundTabKeydownchangingHashjsHiddenClassmqlmoduleNameactivateNextTabactivatePreviousTabcheckModecreateHistoryEntrygetCurrentTabgetPanelgetTabhidePanelhideTabhighlightTabonHashChangeonTabClickonTabKeydownsetAttributessetupsetupResponsiveChecksshowPanelshowTabteardownunhighlightTabunsetAttributes

Generated using TypeDoc