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
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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,});

Additional resources#