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.

If you have buttons or other elements that apply only to the data within the selected tab, you can optionally include a toolbar within that tab. Tab toolbars display below the tab header, above the selected tabs content.

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 '@jkhy/responsive-ui-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" id="saving-acct">
        Tab 1 content
    </rui-tab>

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

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

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

Provide additional information or functionality using the available label and header slots.

<rui-tabset>

    <rui-tab labelText="Savings Accounts" id="saving-acct">
        <div slot="tab-label-extra">
            <rui-grid-button iconType="edit" (rui-click)="editAcct()"></rui-grid-button>
        </div>
        Tab 1 content
    </rui-tab>

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

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

    <rui-tab labelText="Disabled" isDisabled="true" id="disabled-acct">
        Disabled tab content
    </rui-tab>

    <div slot="tab-header-extra">
        <rui-button text="Add New" iconType="add-new" (rui-click)="addNewTab()"></rui-button>
    </div>
    
</rui-tabset>

Angular component development

Component reference

jha-tabset

jha-tab

Implementation

Begin by importing the JhaLayoutModule module into your application.

// import into app.module
import { JhaLayoutModule } from '@jkhy/responsive-ui-angular/jha-layout';

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

export class AppModule(){}

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

<jha-tabset>

    <jha-tab jhaLabelText="Savings Accounts" jhaId="savings-acct">
        Tab 1 content
    </jha-tab>

    <jha-tab jhaLabelText="Checking Accounts" jhaId="checking-acct">
        Tab 2 content
    </jha-tab>

    <jha-tab jhaLabelText="Loans" jhaBadge="NEW" jhaId="loans">
        Tab 3 content
    </jha-tab>

    <jha-tab jhaLabelText="Disabled" jhaIsDisabled="true" jhaId="disabled-acct">
        Disabled tab content
    </jha-tab>
    
</jha-tabset>

Provide additional information or functionality using the available label and header slots.

<jha-tabset>

    <jha-tab jhaLabelText="Savings Accounts" jhaId="savings-acct">
        <div slot="tab-label-extra">
            <jha-grid-button jhaIconType="edit"></jha-grid-button>
        </div>
        Tab 1 content
    </jha-tab>

    <jha-tab jhaLabelText="Checking Accounts" jhaId="checking-acct">
        Tab 2 content
    </jha-tab>

    <jha-tab jhaLabelText="Loans" jhaBadge="NEW" jhaId="loans">
        Tab 3 content
    </jha-tab>

    <jha-tab jhaLabelText="Disabled" jhaIsDisabled="true" jhaId="disabled-acct">
        Disabled tab content
    </jha-tab>

    <div slot="tab-header-extra">
        <jha-button jhaText="Add New" jhaIconType="AddNew" (jhaClick)="addNewTab()"></jha-button>
    </div>
    
</jha-tabset>

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.