Quartz Headless docs/TabsDirective

Search documentation

Type to search the documentation.

API: Primitives

TabsDirective

Directive reference for TabsDirective with the selector [qzTabs].

Overview

Selector

[qzTabs]

Inputs

Input Type Default Required Description
orientation TabsOrientation DEFAULT_TABS_CONFIG.orientation
activationMode TabsActivationMode DEFAULT_TABS_CONFIG.activationMode
disabled unknown false Transform booleanAttribute; reads as boolean.
compareWith (a: T, b: T) => boolean DEFAULT_TABS_CONFIG.compareWith
config Partial<TabsConfig<T>> {}

Models

Two-way bindings: each model is an input and emits the matching change output.

Model Type Default Required Change output Description
value T | null null valueChange

Properties

Name Type Description
readonly activeId Signal<string>
readonly activeTab Signal<TabDirective<T> & CollectionItem>

Public methods

registerTab

registerTab(tab: TabDirective<T>): void
Parameter Type Optional Description
tab TabDirective<T>

unregisterTab

unregisterTab(tab: TabDirective<T>): void
Parameter Type Optional Description
tab TabDirective<T>

registerPanel

registerPanel(panel: TabPanelDirective<T>): void
Parameter Type Optional Description
panel TabPanelDirective<T>

unregisterPanel

unregisterPanel(panel: TabPanelDirective<T>): void
Parameter Type Optional Description
panel TabPanelDirective<T>

activate

activate(tab: TabDirective<T>, options?: { focus?: boolean; }): void
Parameter Type Optional Description
tab TabDirective<T>
options { focus?: boolean } Yes

setActive

setActive(tab: TabDirective<T>, options?: { focus?: boolean; }): void
Parameter Type Optional Description
tab TabDirective<T>
options { focus?: boolean } Yes

activeTabIndex

activeTabIndex(id: string): 0 | -1
Parameter Type Optional Description
id string

isSelected

isSelected(tab: TabDirective<T>): boolean
Parameter Type Optional Description
tab TabDirective<T>

isPanelSelected

isPanelSelected(panel: TabPanelDirective<T>): boolean
Parameter Type Optional Description
panel TabPanelDirective<T>

panelIdFor

panelIdFor(tab: TabDirective<T>): string | null
Parameter Type Optional Description
tab TabDirective<T>

tabIdFor

tabIdFor(panel: TabPanelDirective<T>): string | null
Parameter Type Optional Description
panel TabPanelDirective<T>

handleListKeydown

handleListKeydown(event: KeyboardEvent): void
Parameter Type Optional Description
event KeyboardEvent