Quaff

QTabs

Tabs organize related views and show the current selection. Choose primary, secondary, or vertical tabs, with labels and optional icons.

Soundbox

Fast Forward

Voltage Club · New album

info QTabs API Source
interface QTabsProps extends HTMLAttributes<HTMLElement>
activeClass
?: string = undefined
Class string to apply when the component (or its associated route) is active. `activeClass` on component groups (e.g. `QList`, `QTabs` etc.) will apply to active components they contain. `activeClass` on individual components (e.g. `QItem`, `QTab` etc.) will overwrite `activeClass` from their containing group.
activeStyle
?: string = undefined
Styles to add when the component (or its associated route) is active. `activeStyle` on component groups (e.g. `QList`, `QTabs` etc.) will apply to active components they contain. `activeStyle` on individual components (e.g. `QItem`, `QTab` etc.) will overwrite `activeStyle` from their containing group.
inlineLabel
?: boolean = false
Places icons and labels next to each other in primary tabs.
noSeparator
?: boolean = false
Removes the separator line under the tabs (or to the right for vertical tabs).
value
?: string = $bindable(undefined)
The bound value of the component.
variant
?: QTabsVariants = "primary"
Visual style variant of the tabs.
info QTab API Source
interface QTabProps extends HTMLAttributes<HTMLElement>
activeClass
?: string = undefined
Class string to apply when the component (or its associated route) is active. `activeClass` on component groups (e.g. `QList`, `QTabs` etc.) will apply to active components they contain. `activeClass` on individual components (e.g. `QItem`, `QTab` etc.) will overwrite `activeClass` from their containing group.
activeStyle
?: string = undefined
Styles to add when the component (or its associated route) is active. `activeStyle` on component groups (e.g. `QList`, `QTabs` etc.) will apply to active components they contain. `activeStyle` on individual components (e.g. `QItem`, `QTab` etc.) will overwrite `activeStyle` from their containing group.
icon
?: MaterialSymbol | Snippet = undefined
Icon to display in the tab. Can be a Material Symbol name or a custom snippet.
name
: string = undefined
Unique identifier for the tab. Used to match with QTabs' value prop.
to
?: string = undefined
Navigation target URL when the tab is used as a router link. When provided, the tab will render as an anchor tag.

Usage

Primary Tabs
Bind value to choose a panel. Primary tabs stack icons above labels; use inlineLabel to place them side by side. Icon-only tabs need an accessible label. noSeparator removes the divider.
Show labels
Inline icons
Divider
Orbit Racer
Project assets
  • Racer kart
    3D model · 4.2 MB
  • Trackside banners
    Texture atlas · 1.8 MB
  • Finish gate
    3D model · 860 KB
Secondary Tabs
Use variant="secondary" for related views within a section. Icons sit beside labels, and the indicator spans the tab's width.
Order #1048
Racket Works
On its way
Arriving Friday, 18:00–21:00

Your racket and grips have left the warehouse.

Vertical Tabs
variant="vertical" stacks the tabs vertically. This is a Quaff extension for layouts that need it. Values in these settings stay intact when you switch tabs.
Workspace settings
Jamie Lee
Keyboard and Panels
Arrow keys move focus between tabs; vertical tabs use Up and Down. Home and End jump to the first and last tab. Press Enter or Space to select, then Tab to reach the panel.

Connect each tab and panel with id, aria-controls, and aria-labelledby. Give panels role="tabpanel" and tabindex="0", and hide inactive panels with hidden.

Privacy Policy