Version: 1.x

fast-tabs

Tabs are a set of layered sections of content that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel.

Setup

import {
    provideFASTDesignSystem,
    fastTab,
    fastTabPanel,
    fastTabs
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastTab(),
        fastTabPanel(),
        fastTabs()
    );

Usage

Live Editor

<fast-tabs activeid="entrees">
    <fast-tab id="apps">Appetizers</fast-tab>
    <fast-tab id="entrees">Entrees</fast-tab>
    <fast-tab id="desserts">Desserts</fast-tab>
    <fast-tab-panel id="appsPanel">
        <ol>
            <li><fast-anchor href="#" appearance="hypertext">Stuffed artichokes</fast-anchor></li>
            <li><fast-anchor href="#" appearance="hypertext">Bruschetta</fast-anchor></li>
            <li><fast-anchor href="#" appearance="hypertext">Oven-baked polenta</fast-anchor></li>
            <li><fast-anchor href="#" appearance="hypertext">Salami and Fig Crostini with Ricotta</fast-anchor></li>
            <li><fast-anchor href="#" appearance="hypertext">Rosemary-Potato Focaccia with Goat Cheese</fast-anchor></li>
        </ol>
    </fast-tab-panel>
    <fast-tab-panel id="entreesPanel">
        <ol>
            <li><fast-anchor href="#" appearance="hypertext">Mushroom-Sausage Ragù</fast-anchor></li>
            <li><fast-anchor href="#" appearance="hypertext">Tomato Bread Soup with Steamed Mussels</fast-anchor></li>
            <li><fast-anchor href="#" appearance="hypertext">Grilled Fish with Artichoke Caponata</fast-anchor></li>
            <li><fast-anchor href="#" appearance="hypertext">Celery Root and Mushroom Lasagna</fast-anchor></li>
            <li><fast-anchor href="#" appearance="hypertext">Osso Buco with Citrus Gremolata</fast-anchor></li>
        </ol>
    </fast-tab-panel>
    <fast-tab-panel id="dessertsPanel">
        <ol>
            <li><fast-anchor href="#" appearance="hypertext">Tiramisu</fast-anchor></li>
            <li><fast-anchor href="#" appearance="hypertext">Spumoni</fast-anchor></li>
            <li><fast-anchor href="#" appearance="hypertext">Limoncello and Ice Cream with Biscotti</fast-anchor></li>
        </ol>
    </fast-tab-panel>
</fast-tabs>

Result

Create your own design

Tab

import { Tab, tabTemplate as template } from "@microsoft/fast-foundation";
import { tabStyles as styles } from "./my-tab.styles";

export const myTab = Tab.compose({
    baseName: "tab",
    template,
    styles,
});

TabPanel

import { TabPanel, tabPanelTemplate as template } from "@microsoft/fast-foundation";
import { tabPanelStyles as styles } from "./my-tab-panel.styles";

export const myTabPanel = TabPanel.compose({
    baseName: "tab-panel",
    template,
    styles,
});

Tabs

import { Tabs, tabsTemplate as template } from "@microsoft/fast-foundation";
import { tabsStyles as styles } from "./my-tabs.styles";

export const myTabs = Tabs.compose({
    baseName: "tabs",
    template,
    styles,
});

API

class: `Tabs`

Superclass

Name	Module	Package
`FoundationElement`	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
`orientation`	public	`TabsOrientation`		The orientation
`activeid`	public	`string`		The id of the active tab
`activeindicator`	public	`boolean`	`true`	Whether or not to show the active indicator
`activetab`	public	`HTMLElement`		A reference to the active tab
`$presentation`	public	`ComponentPresentation or null`		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
`template`	public	`ElementViewTemplate or void or null`		Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
`styles`	public	`ElementStyles or void or null`		Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`adjust`	public	The adjust method for FASTTabs	`adjustment: number`	`void`
`templateChanged`	protected			`void`	FoundationElement
`stylesChanged`	protected			`void`	FoundationElement

Events

Name	Type	Description	Inherited From
`change`		Fires a custom 'change' event when a tab is clicked or during keyboard navigation

Attributes

Name	Field	Inherited From
`orientation`	orientation
`activeid`	activeid
	activeindicator

CSS Parts

Name	Description
`tablist`	The element wrapping for the tabs
`tab`	The tab slot
`activeIndicator`	The visual indicator
`tabpanel`	The tabpanel slot

Slots

Name	Description
`start`	Content which can be provided before the tablist element
`end`	Content which can be provided after the tablist element
`tab`	The slot for tabs
`tabpanel`	The slot for tabpanels

Variables

Name	Description	Type
`TabsOrientation`	The orientation of the @microsoft/fast-foundation#(Tabs:class) component	`{ vertical: "vertical", horizontal: "horizontal", }`

class: `TabPanel`

Superclass

Name	Module	Package
`FoundationElement`	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Description	Inherited From
`$presentation`	public	`ComponentPresentation or null`	A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
`template`	public	`ElementViewTemplate or void or null`	Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
`styles`	public	`ElementStyles or void or null`	Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`templateChanged`	protected			`void`	FoundationElement
`stylesChanged`	protected			`void`	FoundationElement

Slots

Name	Description
	The default slot for the tabpanel content

class: `Tab`

Superclass

Name	Module	Package
`FoundationElement`	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Description	Inherited From
`disabled`	public	`boolean`	When true, the control will be immutable by user interaction. See disabled HTML attribute for more information.
`$presentation`	public	`ComponentPresentation or null`	A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
`template`	public	`ElementViewTemplate or void or null`	Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
`styles`	public	`ElementStyles or void or null`	Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`templateChanged`	protected			`void`	FoundationElement
`stylesChanged`	protected			`void`	FoundationElement

Attributes

Name	Field	Inherited From
	disabled

Slots

Name	Description
	The default slot for the tab content

Setup​

Usage​

Create your own design​

Tab​

TabPanel​

Tabs​

API​

class: Tabs​

Superclass​

Fields​

Methods​

Events​

Attributes​

CSS Parts​

Slots​

Variables​

class: TabPanel​

Superclass​

Fields​

Methods​

Slots​

class: Tab​

Superclass​

Fields​

Methods​

Attributes​

Slots​

Additional resources​

Setup

Usage

Create your own design

Tab

TabPanel

Tabs

API

class: `Tabs`

Superclass

Fields

Methods

Events

Attributes

CSS Parts

Slots

Variables

class: `TabPanel`

Superclass

Fields

Methods

Slots

class: `Tab`

Superclass

Fields

Methods

Attributes

Slots

Additional resources