ClassTabs

Tabs component

Hierarchy (view full)

Constructors

constructor

Properties

_$root _config $tabList $tabListItems $tabs boundOnHashChange boundTabClick boundTabKeydown changingHash jsHiddenClass mql elementType moduleName

Accessors

$root config

Methods

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

Constructors

constructor

Properties

Protected_$root

_$root: HTMLElement

_config

_config: any

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 arrow for next tab
      • Press left 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

StaticelementType

elementType: (new () => Element) = HTMLElement

StaticmoduleName

moduleName: string = 'govuk-tabs'

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

Accessors

Protected$root

Protectedconfig

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 arrow for next tab
    • Press left arrow for previous tab

    Parameters

    • event: KeyboardEvent

      Keydown event

    Returns void

PrivatesetAttributes

Privatesetup

PrivatesetupResponsiveChecks

PrivateshowPanel

PrivateshowTab

Privateteardown

PrivateunhighlightTab

PrivateunsetAttributes

StaticcheckSupport

StaticconfigOverride

  • configOverride(config): {
        [key: string]: unknown;
    }

  • Override configuration

    Parameters

    • config: {
          [key: string]: unknown;
      }

      config to override

      • [key: string]: unknown

    Returns {
        [key: string]: unknown;
    }

    • overidden config
    • [key: string]: unknown

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods