menu
0.11.5
Tab Header
Control that can be used to display custom slotted content, for use within Tab Group component with associated Tab component.
Module
import '@capitec/omni-components/tab';
content_copy 
import { OmniTabHeader } from "@capitec/omni-components-react/tab";
content_copy
Source
Packages
Advanced
Advanced

Properties

Name Attribute Type Description
for for  
string | undefined
 Indicator of which omni-tab element with the matching corresponding id attribute should be displayed.
data   
unknown | undefined
 Data associated with the component.
dir dir  
string
 Used to set the base direction of text for display
lang lang  
string
 Used to identify the language of text content on the web

Slots

Name Description 
loading_indicator
 Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called 
[Default Slot]
 Content to render inside the tab header.

Theme Variables

Name Description 
--omni-theme-primary-color
 Theme primary color. 
--omni-theme-primary-hover-color
 Theme primary hover color. 
--omni-theme-primary-active-color
 Theme primary active color. 
--omni-theme-accent-color
 Theme accent color. 
--omni-theme-accent-hover-color
 Theme accent hover color. 
--omni-theme-accent-active-color
 Theme accent active color. 
--omni-theme-background-color
 Theme background color. 
--omni-theme-background-hover-color
 Theme background hover color. 
--omni-theme-background-active-color
 Theme background active color. 
--omni-theme-font-color
 Theme font color. 
--omni-theme-disabled-border-color
 Theme disabled border color. 
--omni-theme-disabled-background-color
 Theme disabled background color. 
--omni-theme-error-font-color
 Theme disabled background color. 
--omni-theme-error-border-color
 Theme error border color. 
--omni-theme-hint-font-color
 Theme hint font color. 
--omni-theme-inactive-color
 Theme inactive color. 
--omni-theme-box-shadow-color
 Theme inactive color. 
--omni-theme-font-family
 Theme font family. 
--omni-theme-font-size
 Theme font size. 
--omni-theme-font-weight
 Theme font weight. 
--omni-theme-border-radius
 Theme border radius. 
--omni-theme-border-width
 Theme border width. 
--omni-theme-box-shadow
 Theme box shadow.

Component Variables

Name Description 
--omni-tab-header-font-color
 Tab header font color. 
--omni-tab-header-font-family
 Tab header font family. 
--omni-tab-header-font-size
 Tab header font size. 
--omni-tab-header-font-weight
 Tab header font weight. 
--omni-tab-header-min-width
 Tab header tab min width. 
--omni-tab-header-height
 Tab header height. 
--omni-tab-header-width
 Tab header width. 
--omni-tab-header-padding
 Tab header padding. 
--omni-tab-header-disabled-cursor
 Tab header disabled cursor. 
--omni-tab-header-disabled-background-color
 Tab header disabled background color. 
--omni-tab-header-active-font-color
 Tab header active font color. 
--omni-tab-header-tab-height
 Tab header tab height. 
--omni-tab-header-tab-min-width
 Tab header tab min width. 
--omni-tab-header-tab-max-width
 Tab header tab max width. 
--omni-tab-header-tab-margin
 Tab header tab margin. 
--omni-tab-header-hover-background-color
 Tab header tab hover background. 
--omni-tab-header-indicator-bar-height
 Tab header indicator bar height. 
--omni-tab-header-indicator-bar-border-radius
 Tab header indicator bar border radius. 
--omni-tab-header-indicator-bar-width
 Tab header indicator bar width. 
--omni-tab-header-indicator-height
 Tab header indicator height. 
--omni-tab-header-indicator-color
 Tab header indicator color. 
--omni-tab-header-indicator-border-radius
 Tab header indicator border radius. 
--omni-tab-header-indicator-width
 Tab header indicator width.