fast-tabs

Usage

Live Editor
Result
AppetizersEntreesDesserts
  1. Stuffed artichokes
  2. Bruschetta
  3. Oven-baked polenta
  4. Salami and Fig Crostini with Ricotta
  5. Rosemary-Potato Focaccia with Goat Cheese
  1. Mushroom-Sausage Ragù
  2. Tomato Bread Soup with Steamed Mussels
  3. Grilled Fish with Artichoke Caponata
  4. Celery Root and Mushroom Lasagna
  5. Osso Buco with Citrus Gremolata
  1. Tiramisu
  2. Spumoni
  3. Limoncello and Ice Cream with Biscotti

Applying custom styles

fast-tabs

import { customElement } from "@microsoft/fast-element";
import { Tabs, TabsTemplate as template } from "@microsoft/fast-foundation";
import { TabsStyles as styles } from "./tabs.styles";
@customElement({
name: "fast-tabs",
template,
styles,
})
export class FASTTabs extends Tabs {}

fast-tab

import { customElement } from "@microsoft/fast-element";
import { Tab, TabTemplate as template } from "@microsoft/fast-foundation";
import { TabStyles as styles } from "./tab.styles";
@customElement({
name: "fast-tab",
template,
styles,
})
export class FASTTab extends Tab {}

fast-tab-panel

import { customElement } from "@microsoft/fast-element";
import { TabPanel, TabPanelTemplate as template } from "@microsoft/fast-foundation";
import { TabPanelStyles as styles } from "./tab-panel.styles";
@customElement({
name: "fast-tab-panel",
template,
styles,
})
export class FASTTabPanel extends TabPanel {}