Content tabs

Tabs show one of several blocks of content at a time. Use them for the variations of a component, each with its own demo, or for the same example written in several ways, so the page doesn't grow with every variation.

👀 See it

🧰 Use it

Wrap each block in an <ng-doc-tab> element. Tabs with the same group="…" show as one set of tabs, where the first of them is, and name is the tab label:

<ng-doc-tab group="button-variations" name="Button" icon="angular" active>

{{ NgDocActions.demo("ButtonDemoComponent") }}

</ng-doc-tab>

<ng-doc-tab group="button-variations" name="Playground">

{{ NgDocActions.playground("TagPlayground") }}

</ng-doc-tab>

Leave an empty line after the opening tag and before the closing one: Markdown inside an HTML element is rendered only when empty lines separate it from the tags.

📋 Options

🚧 Gotchas

Note

Only the open tab is on the page. Headings inside tabs stay out of the table of contents, and a link to a heading inside a tab that isn't open, from search for example, opens the page at the top. Put the headings that readers should find above the tabs.

Note

Code groups (Code blocks [Code groups]) are tabs too, so their group="…" must differ from the groups of your content tabs.

Next: Demos