Tabs component

Hierarchy

  • GOVUKFrontendComponent
    • Tabs

Constructors

Properties

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

Type declaration

    • (): void
    • Private

      Handle hashchange event

      Returns void

      Returns void, or undefined when prevented

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

Type declaration

    • (event): void
    • Private

      Handle tab link clicks

      Parameters

      • event: MouseEvent

        Mouse click event

      Returns void

      Returns void

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

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 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