Skip to main content

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
Result
Loading...

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​

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields​

NamePrivacyTypeDefaultDescriptionInherited From
orientationpublicTabsOrientationThe orientation
activeidpublicstringThe id of the active tab
activeindicatorpublicbooleantrueWhether or not to show the active indicator
activetabpublicHTMLElementA reference to the active tab
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets 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
stylespublicElementStyles or void or nullSets 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​

NamePrivacyDescriptionParametersReturnInherited From
adjustpublicThe adjust method for FASTTabsadjustment: numbervoid
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events​

NameTypeDescriptionInherited From
changeFires a custom 'change' event when a tab is clicked or during keyboard navigation

Attributes​

NameFieldInherited From
orientationorientation
activeidactiveid
activeindicator

CSS Parts​

NameDescription
tablistThe element wrapping for the tabs
tabThe tab slot
activeIndicatorThe visual indicator
tabpanelThe tabpanel slot

Slots​

NameDescription
startContent which can be provided before the tablist element
endContent which can be provided after the tablist element
tabThe slot for tabs
tabpanelThe slot for tabpanels

Variables​

NameDescriptionType
TabsOrientationThe orientation of the @microsoft/fast-foundation#(Tabs:class) component{ vertical: "vertical", horizontal: "horizontal", }

class: TabPanel​

Superclass​

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields​

NamePrivacyTypeDefaultDescriptionInherited From
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets 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
stylespublicElementStyles or void or nullSets 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​

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Slots​

NameDescription
The default slot for the tabpanel content

class: Tab​

Superclass​

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields​

NamePrivacyTypeDefaultDescriptionInherited From
disabledpublicbooleanWhen true, the control will be immutable by user interaction. See disabled HTML attribute for more information.
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets 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
stylespublicElementStyles or void or nullSets 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​

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes​

NameFieldInherited From
disabled

Slots​

NameDescription
The default slot for the tab content

Additional resources​