Class Tabs

Private $module

Private $tabList

Private $tabListItems

Private $tabs

Private boundOnHashChange

Private boundTabClick

Private boundTabKeydown

Private changingHash

Private jsHiddenClass

Private mql

Private activateNextTab

• activateNextTab(): void
• Private

  Activate next tab

  Returns void

Private activatePreviousTab

• activatePreviousTab(): void
• Private

  Activate previous tab

  Returns void

Private checkMode

• checkMode(): void
• Private

  Setup or teardown handler for viewport resize check

  Returns void

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

• getCurrentTab(): HTMLAnchorElement
• Private

  Get current tab link

  Returns HTMLAnchorElement

  Tab link

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

• hidePanel($tab): void
• Private

  Hide tab panel for tab link

  Parameters

  • $tab: HTMLAnchorElement

    Tab link

  Returns void

Private hideTab

• hideTab($tab): void
• Private

  Hide panel for tab link

  Parameters

  • $tab: HTMLAnchorElement

    Tab link

  Returns void

Private highlightTab

• highlightTab($tab): void
• Private

  Set 'selected' state for tab link

  Parameters

  • $tab: HTMLAnchorElement

    Tab link

  Returns void

Private onHashChange

• onHashChange(): void
• Private

  Handle hashchange event

  Returns void

  Returns void, or undefined when prevented

Private onTabClick

• onTabClick(event): void
• Private

  Handle tab link clicks

  Parameters

  • event: MouseEvent

    Mouse click event

  Returns void

  Returns void

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

• setAttributes($tab): void
• Private

  Set tab link and panel attributes

  Parameters

  • $tab: HTMLAnchorElement

    Tab link

  Returns void

Private setup

• setup(): void
• Private

  Setup tab component

  Returns void

Private setupResponsiveChecks

• setupResponsiveChecks(): void
• Private

  Setup viewport resize check

  Returns void

Private showPanel

• showPanel($tab): void
• Private

  Show tab panel for tab link

  Parameters

  • $tab: HTMLAnchorElement

    Tab link

  Returns void

Private showTab

• showTab($tab): void
• Private

  Show panel for tab link

  Parameters

  • $tab: HTMLAnchorElement

    Tab link

  Returns void

Private teardown

• teardown(): void
• Private

  Teardown tab component

  Returns void

Private unhighlightTab

• unhighlightTab($tab): void
• Private

  Unset 'selected' state for tab link

  Parameters

  • $tab: HTMLAnchorElement

    Tab link

  Returns void

Private unsetAttributes

• unsetAttributes($tab): void
• Private

  Unset tab link and panel attributes

  Parameters

  • $tab: HTMLAnchorElement

    Tab link

  Returns void