Tabs

import { TgTabsComponent, TgTabsItemComponent, TgTabsItemContentComponent, TgTabsItemHeadingDirective, TgTabsLinkDirective } from '@trademe/tangram';

Tabs allow for related content to be shown and hidden within a fixed space.

When guiding a customer through a process consider using a step indicator instead of tabs.

First tab content

Content slots

Code

<tg-tabs
    [selected]="0">
    <tg-tab>
        <tg-tab-heading>
            First tab heading
        </tg-tab-heading>
        <tg-tab-content>
            First tab content
        </tg-tab-content>
    </tg-tab>
    <tg-tab>
        <tg-tab-heading>
            Second tab heading
        </tg-tab-heading>
        <tg-tab-content>
            Second tab content
        </tg-tab-content>
    </tg-tab>
    <tg-tab>
        <tg-tab-heading>
            Third tab heading
        </tg-tab-heading>
        <tg-tab-content>
            Third tab content
        </tg-tab-content>
    </tg-tab>
</tg-tabs>

Behaviour

If a tab heading is too long to fit into the screen, the customer is able to scroll horizontally to view the entire heading.

Tab link directive

Consider using the tab link directive to display content that you want to lazy load, or when you require a unique URL for content.

The tab link directive can be used on an <a> tag and can not be used alongside <tg-tab>. To dynamically place content into your page use tab link with the <router-outlet>.