packages/web-components/src/tabs/tabs.spec.md
Tabs allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.
A note on the naming of this component. The closest equivalent from Fluent UI React is the TabList control. The Web Component Tabs control is named differently because the control comprises of Tabs, Tab List and a Tab Panel. Whereas the react equivalent does not include tab panels. Therefore, a fully equivalent name, in this case, would be inaccurate.
| attribute | type | default | description |
|---|---|---|---|
| activeid | string | - | sets the selected tab |
| appearance | "subtle" | "transparent | "transparent" | - |
| disabled | boolean | - | blocks control and all tab children from all keyboard and mouse events. |
| size | "small" | "medium" | "large" | "medium" | |
| orientation | "vertical" | "horizontal" | "horizontal" | sets the orientation of the tab list to vertical display |
| state | variant | destination | css variable |
|---|---|---|---|
| rest | transparent, rest, selected | background color | --transparentBackground |
| rest | transparent, rest, selected | content color | --neutralForeground1 |
| rest | transparent, rest, selected | selection indicator color | --compoundBrandStroke1 |
| rest | transparent, rest, selected | icon color | --compoundBrandForeground1 |
| - | -- | -- | -- |
| rest | transparent, rest, unselected | background color | --transparentBackground |
| rest | transparent, rest, unselected | content color | --neutralForeground2 |
| rest | transparent, rest, unselected | selection indicator color | --transparentStroke |
| rest | transparent, rest, unselected | icon color | --neutralForeground2 |
| -- | -- | -- | -- |
| hover | transparent, hover, selected | background color | --transparentBackgroundHover |
| hover | transparent, hover, selected | content color | --neutralForeground1Hover |
| hover | transparent, hover, selected | selection indicator color | --compoundBrandStroke1Hover |
| hover | transparent, hover, selected | icon color | --compoundBrandForeground1Hover |
| -- | -- | -- | -- |
| hover | transparent, hover, unselected | background color | --transparentBackgroundHover |
| hover | transparent, hover, unselected | content color | --neutralForeground2Hover |
| hover | transparent, hover, unselected | selection indicator color | --compoundBrandStroke1Hover |
| hover | transparent, hover, unselected | icon color | --compoundBrandForeground2Hover |
| -- | -- | -- | -- |
| pressed | transparent, hover, selected | background color | --transparentBackgroundPressed |
| pressed | transparent, hover, selected | content color | --neutralForeground1Pressed |
| pressed | transparent, hover, selected | selection indicator color | --compoundBrandStroke1Pressed |
| pressed | transparent, hover, selected | icon color | --compoundBrandForeground1Pressed |
| -- | -- | -- | -- |
| pressed | transparent, hover, unselected | background color | --transparentBackgroundPressed |
| pressed | transparent, hover, unselected | content color | --neutralForeground2Pressed |
| pressed | transparent, hover, unselected | selection indicator color | --neutralStroke1Pressed |
| pressed | transparent, hover, unselected | icon color | --compoundBrandForeground1Pressed |
| -- | -- | -- | -- |
| disabled | transparent, disabled, selected | background color | --transparentBackground |
| disabled | transparent, disabled, selected | content color | --neutralForegroundDisabled |
| disabled | transparent, disabled, selected | selection indicator color | --neutralForegroundDisabled |
| disabled | transparent, disabled, selected | icon color | --nuetralForegroundDisabled |
| -- | -- | -- | -- |
| disabled | transparent, disabled, unselected | background color | --transparentBackground |
| disabled | transparent, disabled, unselected | content color | --neutralForegroundDisabled |
| disabled | transparent, disabled, unselected | selection indicator color | --transparentStroke |
| disabled | transparent, disabled, unselected | icon color | --neutralForegroundDisabled |
down arrow performs as right arrow and up arrow performs as left arrowdown arrow or up arrowtabindex="0"role, aria-labelledby, aria-label, aria-controls, aria-selected, aria-haspopup, aria-orientationonTabSelect. This event handling will be removed in favor of the TabList web component taking control of the event handling.as prop (to render the list as HTML element preferred by developer) will be omittedThe Fluent/FAST web component differs from the Fluent React Control as follows:
| difference | Tabs - Fluent Web Component | TabList - Fluent React Component |
|---|---|---|
| active indicator control / id control selection | managed by control | managed by user with application state |
| keyboard and focus selection | selects active tab on arrow key focus change | reselects tab on space bar or enter after arrow refocus |
| icon slotting | favors composition (dev chooses how to slot which icon) | favors automation (dev supplies icon name and control handles the rendering of icon) |
| icon slotting filled / unfilled icons | favors composition over automated handling. requires dev to add interactivity to render filled or unfilled icon | favors automated handling of icons and provides filled and unfilled iconography on selection |
| tab-panels | requires tab panel control to set content on tab selection | does not require or include a tab panel control / template |
| reserve-selected-tab-space | has reserve selected tab space defaulting to true and gives user the option to set to false | removes attribute |
Link to FAST Web Component API
| fluent api name | fast api Equivalent |
|---|---|
| vertical | orientation |
| selected-value | activeid |
| value | id |
By default Tabs are arranged horizontally. The developer sets selected-value Fluent-Tab-List attribute. The Component handles the logic of what is shown and hidden when user clicks on the tabs. For switcing to work correctly the tab list requires that the indexing of the tabs and tab-panels be organized to correspond to their matching items - the order of the tabs must match the order of the tab panels:
<fluent-tab-list>
<fluent-tab>One / Left</fluent-tab>
<fluent-tab>Two / Middle</fluent-tab>
<fluent-tab>Three / Right</fluent-tab>
<fluent-tab-panel>Panel One</fluent-tab-panel>
<fluent-tab-panel>Panel Two</fluent-tab-panel>
<fluent-tab-panel>Panel Three</fluent-tab-panel>
</fluent-tab-list>
If the developer wants to control the selected tab, tab values can be provided.
<fluent-tab-list activeid="tab-one">
<fluent-tab id="tab-one">One / Left</fluent-tab>
<fluent-tab id="tab-two">Two / Middle</fluent-tab>
<fluent-tab id="tab-three">Three / Right</fluent-tab>
<fluent-tab-panel>Panel One</fluent-tab-panel>
<fluent-tab-panel>Panel Two</fluent-tab-panel>
<fluent-tab-panel>Panel Three</fluent-tab-panel>
</fluent-tab-list>
<fluent-tab-list orientation="vertical">
<fluent-tab>One / Left</fluent-tab>
<fluent-tab>Two / Middle</fluent-tab>
<fluent-tab>Three / Right</fluent-tab>
</fluent-tab-list>
@fluentui/web-components/unstabledisallowedChangeTypes to "major", "prerelease"