govuk-frontend
    Preparing search index...

    Class Tabs

    Tabs component

    Hierarchy (View Summary)

    Index

    Constructors

    Properties

    _$root: HTMLElement
    $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: MouseEvent): void
      • Private

        Handle tab link clicks

        Parameters

        • event: MouseEvent

          Mouse click event

        Returns void

        Returns void

    boundTabKeydown: (event: KeyboardEvent) => void

    Type declaration

      • (event: KeyboardEvent): 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

    changingHash: boolean = false
    jsHiddenClass: string = 'govuk-tabs__panel--hidden'
    mql: MediaQueryList = null
    elementType: new () => Element = HTMLElement
    moduleName: string = 'govuk-tabs'

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

    Accessors

    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

      Hide tab panel for tab link

      Parameters

      • $tab: HTMLAnchorElement

        Tab link

      Returns void

    • Private

      Set 'selected' state for tab link

      Parameters

      • $tab: HTMLAnchorElement

        Tab link

      Returns void

    • Private

      Handle tab link clicks

      Parameters

      • event: MouseEvent

        Mouse click event

      Returns void

      Returns 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

    • Private

      Set tab link and panel attributes

      Parameters

      • $tab: HTMLAnchorElement

        Tab link

      Returns void

    • Private

      Show tab panel for tab link

      Parameters

      • $tab: HTMLAnchorElement

        Tab link

      Returns void

    • Private

      Unset 'selected' state for tab link

      Parameters

      • $tab: HTMLAnchorElement

        Tab link

      Returns void

    • Private

      Unset tab link and panel attributes

      Parameters

      • $tab: HTMLAnchorElement

        Tab link

      Returns void