Tabs ​

Tabs are horizontal navigation elements showing in which section the user is currently in. Content in tabs is organized by grouping related information into multiple panels rather than different pages, fitting more content into a limited space.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Implementations ​

The component Tabs is available in the following technologies:

CSS Components
cssreactvue
Web Components
webreactvueangular

Parameters ​

Parameters

Make sure you have read about the parameters in here.

The parametrization of the component can be done with the following custom params or properties:

NameTypeSlotDescription
tabsobject[]Array of tabs.
modelnumberIndex of the active tab.
customobject

A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format.

Example:

html
<z-tabs custom='{"fill":"#06e7a3"}' />

Check the available values in the customization section.

custom-strstring

The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters.

Example:

html
<z-tabs custom-str="fill:#06e7a3" />
z-themestring

Sets the theme of the component. The possible values are light and dark.

html
<z-tabs z-theme="dark" />

From Figma to code ​

...

Customization ​

INFO

Check everything about the customization mechanics in the "How it works" documentation.

No customization tokens yet implemented for this component

Accessibility ​

...