Tabs

A component that allows users to switch between different sections of content.

Properties

Color, Variant, AppearanceOverride

Use the Color, Variant and AppearanceOverride properties to style the component.

Available colors are amber, blue, cyan, emerald, fuchsia, green, indigo, lime, neutral, orange, pink, purple, red, rose, sky, slate, stone, teal, violet, yellow, zinc, white. Available variants differ per color and can be viewed in the UI demo below.

The theme data for the component can be found in the Theming section and can be overwritten through AppearanceOverride.

Pass Color and Variant as a string and AppearanceOverride as an optionalColorTable. More information on overrides can be found here.

Tailwind Color

solid

Code block has not loaded. An error may have occurred.

Tabs

Type

Code block has not loaded. An error may have occurred.

DefaultIndex

Type

Code block has not loaded. An error may have occurred.

SelectedIndex

Type

Code block has not loaded. An error may have occurred.

OnSelect

Type

Code block has not loaded. An error may have occurred.

Instance Properties

This instance takes all the properties of a Frame. SpecialKeys, such as fusion.Children will also be passed to the instance.

Theming

States

State	Description
Container	The state for the container of the tabs.
Base	The base state for the tab elements.
Hover
Press
Active
Disabled
ActiveDisabled	If the currently selected tab is disabled, this state will be applied.

Colors

Color	Description
Background
Stroke
Text