menu
0.11.5
Tab Group
Component that displays content in tabs.
Module
import '@capitec/omni-components/tab';
content_copy 
import { OmniTabGroup } from "@capitec/omni-components-react/tab";
content_copy
Source
Packages
Interactive
Interactive

Properties

Name Attribute Type Description
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

Events

Name Type Description
tab-select 
CustomEvent<{ previous: HTMLElement, selected: HTMLElement}>
 Dispatched when an omni-tab is selected.

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]
 All omni-tab components that are managed by this component. 
header
 Optional omni-tab-header components associated with each omni-tab component.

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-group-tab-bar-overflow-x
 Tabs tab bar overflow x. 
--omni-tab-group-tab-bar-overflow-y
 Tabs tab bar overflow y. 
--omni-tab-group-tab-bar-width
 Tabs tab bar width. 
--omni-tab-group-tab-bar-height
 Tabs tab bar height. 
--omni-tab-group-tab-bar-border-bottom
 Tabs tab bar bottom border. 
--omni-tab-group-tab-bar-background-color
 Tabs tab bar background color. 
--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.