Tabs

Overview

Tabs allow applications to present a related set of content views within a small area, with only one content view displayed at a time. Each tab has a header with a brief text description of its content. Clicking on a tab header displays the content for that tab, hiding the content for all other tabs.

The tab component offers horizontal scrolling for tab headers when the width of all headers is greater than the available screen width. This generally works well on desktop systems, but the amount of scrolling that occurs at smaller screen widths (such as mobile) can make the tab component more difficult to work with in those environments. For this reason, it can be better to use the accordion functionality in the group box component at mobile size. This works similar to the tab component except the headers are displayed vertically, with the content displayed within whichever group box is expanded. Like the tab component, group boxes in accordion mode only display the content for the selected (expanded) group box.

Tabs only display the content of the currently selected tab, so when the user prints the page, the printout will only include the data in the currently selected tab. The same is true for a group box in accordion mode; only the content for the currently expanded group box will print. If users need a printout to include the data within all tabs and group boxes, you should provide a print-friendly version of this data.

Development

Web component development

Component reference

rui-tabset

rui-tab

Implementation

Begin by importing the rui-tabs module into your application.

// import into app.module
import '@jha/rui-wc/components/rui-tabs/rui-tabs-imports';

Add a rui-tabset element for each tab component. Nest a rui-tab element within the rui-tabset for each tab header, using the labelText property to specify the tab header text.

<rui-tabset>

    <rui-tab labelText="Savings Accounts">
        Tab 1 content
    </rui-tab>

    <rui-tab labelText="Checking Accounts">
        Tab 2 content
    </rui-tab>

    <rui-tab labelText="Loans" badge="NEW">
        Tab 3 content
    </rui-tab>

    <rui-tab labelText="Disabled" isDisabled="true">
        Disabled tab content
    </rui-tab>
    
</rui-tabset>

Angular component development

Component reference

mat-tab-group, mat-tab

Implementation

Use the Angular Material mat-tab-group element with nested mat-tab elements to implement a tab component.

Include @angular/material, @angular/platform-browser, and @angular/platform-browser-dynamic in package.json, where x.y.z is the currently supported version number for each framework specified here. Use npm install to install these frameworks.

"@angular/material": "x.y.z",
"@angular/platform-browser": "x.y.z",
"@angular/platform-browser-dynamic": "x.y.z",

Import MatTabsModule and BrowserAnimationsModule into app.module.ts:

import { MatTabsModule } from '@angular/material/tabs';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        ...
        MatTabsModule,
        BrowserAnimationsModule,
        ...
    ]
})

export class AppModule() {}

By default, the Angular Material tabs component includes a disorienting animation on the tab content every time the user clicks a tab header. We do not support that user experience, so you must explicitly turn this off by adding the following to each view’s TypeScript.

import { Component, HostBinding } from '@angular/core';

export class MyTabsExampleComponent {

    @HostBinding('@.disabled')
    animationsDisabled = true;

    ...

}

Add a mat-tab-group tag for each tab component. Be sure to include the disableRipple attribute on this tag. Nest a mat-tab element within the mat-tab-group for each tab header, using the label attribute to specify the tab header text.

<mat-tab-group disableRipple>

    <mat-tab label="Tab 1">
        Tab 1 content
    </mat-tab>

    <mat-tab label="Tab 2">
        Tab 2 content
    </mat-tab>

    <mat-tab label="Tab 3">
        Tab 3 content
    </mat-tab>

</mat-tab-group>

Component playground

Design

Figma design

Add the base tab bar and resize its width to match its container’s width.

Add one active tab directly above the tab bar; change its title to an appropriate value.

Then add one or more inactive tabs directly above the tab bar; change the title in each to an appropriate value.

You can change the width of the active and inactive tabs to fit their title if needed.

Display sample content for the active tab.

Adobe XD design

Add the base tab bar and resize its width to match its container’s width.

Add one active tab directly above the tab bar; change its title to an appropriate value.

Then add one or more inactive tabs directly above the tab bar; change the title in each to an appropriate value.

You can change the width of the active and inactive tabs to fit their title if needed.

Display sample content for the active tab.