# 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 activated Tab(Starts from 0) | number | 0 |
activeTabName | active-tab-name | The name of the tab to be activated. | 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-height | height of the tab container. |
--fw-tabs-margin-l | left margin for the tab items |
--fw-tabs-margin-r | right margin for the tab items |
--fw-tabs-padding-left | left padding for the tab items |
--fw-tabs-padding-right | right padding 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