Tabs component

Preserve

Hierarchy

  • GOVUKFrontendComponent
    • Tabs

Constructors

Properties

$module: Element
$tabList: Element
$tabListItems: NodeListOf<HTMLLIElement>
$tabs: NodeListOf<HTMLAnchorElement>
boundOnHashChange: (() => void)

Type declaration

    • (): void
    • Returns void

boundTabClick: ((event) => void)

Type declaration

    • (event): void
    • Parameters

      • event: MouseEvent

      Returns void

boundTabKeydown: ((event) => void)

Type declaration

    • (event): void
    • Parameters

      • event: KeyboardEvent

      Returns void

changingHash: boolean = false
jsHiddenClass: string = 'govuk-tabs__panel--hidden'
mql: MediaQueryList = null
moduleName: string = 'govuk-tabs'

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

Methods

  • 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

    Get tab panel for tab link

    Parameters

    • $tab: HTMLAnchorElement

      Tab link

    Returns Element

    Tab panel

  • Private

    Get tab link by hash

    Parameters

    • hash: string

      Hash fragment including #

    Returns HTMLAnchorElement

    Tab link

  • 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

    Unset tab link and panel attributes

    Parameters

    • $tab: HTMLAnchorElement

      Tab link

    Returns void