# 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

Personal Official Submit Save Chennai Bangalore Hyderabad Submit Save
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