BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Tabs

Tabbed content switcher.

Package
@solidiom/tabs
Version
0.0.1-next.0
Status
stable

Generated from the package's public source.

API

ActivationModetype

Activation mode: automatic activates on focus, manual requires Enter/Space.

View source

Contentcomponent

@solidiom/tabs — Headless tabs primitive with keyboard navigation and roving focus. Parts: Root, List, Trigger, Content.

                        Content(props: TabsContentProps): Element

Props

class?
string
style?
string | CSSProperties
value
string — Value identifying this panel. Must match a Trigger's value.

children: Element

View source

Listcomponent

@solidiom/tabs — Headless tabs primitive with keyboard navigation and roving focus. Parts: Root, List, Trigger, Content.

                        List(props: TabsListProps): Element

Props

class?
string
ref?
(el: HTMLDivElement) => void

children: Element

View source

Rootcomponent

@solidiom/tabs — Headless tabs primitive with keyboard navigation and roving focus. Parts: Root, List, Trigger, Content.

                        Root(props: TabsRootProps): Element

Props

activationMode?
ActivationMode — Activation mode: "automatic" (default) activates on focus, "manual" on Enter/Space.
defaultValue?
string — Default active tab for uncontrolled mode.
onValueChange?
(value: string, details: ChangeDetails<TabsReason>) => void — Called when active tab changes.
orientation?
"horizontal" | "vertical" — Orientation: "horizontal" (default) or "vertical".
value?
Accessor<string> — Controlled active tab value.

children: Element

View source

TabsContentPropsinterface

Props for a tab content panel.

Props

class?
string
style?
string | CSSProperties
value
string — Value identifying this panel. Must match a Trigger's value.

children: Element

View source

TabsListPropsinterface

Props for the tab list container.

Props

class?
string
ref?
(el: HTMLDivElement) => void

children: Element

View source

TabsReasontype

Reason for a tab value change.

View source

TabsRootPropsinterface

Props for the tabs root container.

Props

activationMode?
ActivationMode — Activation mode: "automatic" (default) activates on focus, "manual" on Enter/Space.
defaultValue?
string — Default active tab for uncontrolled mode.
onValueChange?
(value: string, details: ChangeDetails<TabsReason>) => void — Called when active tab changes.
orientation?
"horizontal" | "vertical" — Orientation: "horizontal" (default) or "vertical".
value?
Accessor<string> — Controlled active tab value.

children: Element

View source

TabsTriggerPropsinterface

Props for an individual tab trigger button.

Props

disabled?
boolean — Whether this tab trigger is disabled.
ref?
(el: HTMLButtonElement) => void
value
string — Value identifying this tab. Must match a Content's value.

children: Element

View source

Triggercomponent

@solidiom/tabs — Headless tabs primitive with keyboard navigation and roving focus. Parts: Root, List, Trigger, Content.

                        Trigger(props: TabsTriggerProps): Element

Props

disabled?
boolean — Whether this tab trigger is disabled.
ref?
(el: HTMLButtonElement) => void
value
string — Value identifying this tab. Must match a Content's value.

children: Element

View source