# Tabs (fw-tabs)
fw-tabs displays a series of tabs on the user interface and enables tab-style navigation. The component doesn’t have any attributes that impart styling, it merely functions as a container for the tabs. It makes use of fw-tab
and fw-tab-panel
. Each tab must be slotted into tab
slot and panel must refer to fw-tab-panel of same name.
# Demo
Show Code
# Usage
# Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
activeTabIndex | active-tab-index | The index of the tab to be activated (Starts from 0) | number | 0 |
activeTabName | active-tab-name | The name of the tab to be activated. If present, will be taken as priority over activeTabIndex . | string | undefined |
label | label | Describes the purpose of set of tabs. | string | '' |
variant | variant | The style of tab headers that needs to be displayed, box will display headers in a container. | "box" \| "normal" | 'normal' |
# Events
Event | Description | Type |
---|---|---|
fwChange | Triggered when a the view switches to a new tab. | CustomEvent<any> |
# Methods
# activateTab(index?: number, name?: string) => Promise<void>
Activates the tab based based on tabindex or name.
# Returns
Type: Promise<void>
# CSS Custom Properties
Name | Description |
---|---|
--fw-tabs-border-block-end | border bottom style of tabs |
--fw-tabs-height | height of the tab container. |
--fw-tabs-margin-inline-end | Right margin if direction is left-to-right, and Left margin if direction is right-to-left for the tab items |
--fw-tabs-margin-inline-start | Left margin if direction is left-to-right, and Right margin if direction is right-to-left for the tab items |
--fw-tabs-padding-inline-end | Right padding if direction is left-to-right, and Left padding if direction is right-to-left for the tab items |
--fw-tabs-padding-inline-start | Left padding if direction is left-to-right, and Right padding if direction is right-to-left for the tab items |
--fw-tabs-width | width of the tab container. |
# Dependencies
# Depends on
# Graph
graph TD;
fw-tabs --> fw-tab-panel
style fw-tabs fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks