NavigationTabs

Tabs with arrow keys, automatic or manual activation, hidden until-found panels and an optional state in the URL.

import { NavigationTabs } from '@zairakai/vue-components/Navigation'

Usage

<NavigationTabs />

Example

The overview.

<template>
  <NavigationTabs>
    <NavigationTabList label="Sections">
      <NavigationTab id="one">Overview</NavigationTab>
      <NavigationTab id="two">Details</NavigationTab>
    </NavigationTabList>
    <NavigationTabPanel id="one">The overview.</NavigationTabPanel>
    <NavigationTabPanel id="two">The details.</NavigationTabPanel>
  </NavigationTabs>
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	string	undefined	The id of the active tab. Without it the first enabled tab is active.
queryParam	string		Keep the active tab in this query parameter of the URL (?tab=settings).
orientation	string	'horizontal'
activation	string	'auto'	"auto" shows a panel as soon as its tab has the focus, "manual" waits for Enter or Space.
transition	boolean	false	Animate the change of panel with a view transition, when the browser has them.

Events

Name	Description
update:modelValue

Slots

Name	Description
default

See Theming for the class hooks and the data-* state of the components.