# 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 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