Web Components Tabs Overview

The Web Components Tabs is a lightweight and user-friendly component that organizes corresponding content in a tab format or a collection of tabs typically placed horizontally. The Web Components Tab enables end-users to easily click through and display different views. There are several features and customization options like tab orientation, templating, built-in header styles, animation, scroll buttons, and more.

The Ignite UI for Web Components Tabs organizes and switches between similar data sets. The tabs are placed at the top of the data content. When a tab is selected its corresponding content is displayed.

Web Components Tabs Example

The Web Components Tabs example below displays three different tabs aligned in a single line so you can navigate across each in a fast and easy way.

How to use Tabs with Ignite UI for Web Components

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents

Before using the Tabs, you need to import it as follows:

import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents';

defineComponents(IgcTabsComponent);

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

Simple Tabs declaration is done as follows:

<igc-tabs>
    <igc-tab label="Tab 1">
        <span>Content for tab 1</span>
    </igc-tab>
    <igc-tab label="Tab 2">
        <span>Content for tab 2</span>
    </igc-tab>
    <igc-tab>
        <span slot="label">Tab 3</span>
        <span>Content for tab 3</span>
    </igc-tab>
</igc-tabs>

Tab text can be set either as simple string using the Label property or by assigning children to the label slot. Any remaining children in the default slot are rendered as the tab content.

When using the label slot, we recommend using a <span> element when you want to provide text and an <igc-icon> or <igc-icon-button> component when you want to display icons.

Selection

The Tabs emits Change event when the user selects an item either by key press or click. The Select method allows you to select a tab by specifying the Tab or its id.

If the selected tab is not specified on initial load, the first tab that is not disabled will be selected.

The default behavior, which selects a tab when the user is navigating with the arrow keys, could be modified by the Activation property. Setting it to Manual will focus the next/previous tab on arrow key press, but the tab will be selected only after pressing SPACE or ENTER

Disabled Tab

A tab is disabled by setting the Disabled attribute:

<igc-tab label="Tab 1" disabled></igc-tab>

Alignment

The Alignment property controls how Web Components tabs are positioned. It accepts the following values:

• Start (default): the width of the tab depends on the content (label, icon, both) and all tabs have equal padding. First tab is aligned to the tabs container’s left side.
• Center: the width of the tab depends on the content and occupies the tabs container’s center.
• End: the width of the tab depends on the content and all tabs have equal padding. Last tab is aligned to the tabs container’s right side.
• Justify: all tabs are equal in width and fully fit the tabs container.

If the space is not enough to fit all tabs, scroll buttons are displayed.

Scrolling

Scroll buttons are shown when the available space is not enough to render all Web Components tabs. The start scroll button is disabled if the first tab is in view. Respectively, when last tab is in view the end scroll button is disabled. By pressing one of the scroll buttons the tabs are scrolled so the tab in that direction is fully visible, or if it is already visible the previous/next tab in that direction is displayed.

Keyboard Navigation

Prefix / Suffix

Besides the label slot, which can be used to display an icon, text, or both, each tab also provides prefix and suffix slots for displaying additional content at the beginning and/or the end. When slotting content into the prefix and suffix slots, we recommend using a <span> element for symbols or emojis, and an <igc-icon> or <igc-icon-button> component for icons.

Styling

The Tabs component exposes several CSS parts, giving you full control over its style:

The Tab component exposes the following CSS parts:

igc-tab::part(tab-header),
igc-tabs::part(inner)::after {
    --item-background: var(--ig-surface-600);
    --border-color: var(--ig-success-300);
}

igc-tab::part(tab-body),
igc-tab[selected] igc-icon {
    --item-active-icon-color: var(--ig-success-300);
}

igc-tab:not([selected]) igc-icon {
    --item-icon-color: var(--ig-gray-500);
}

igc-tabs::part(start-scroll-button),
igc-tabs::part(end-scroll-button) {
    --background: var(--ig-surface-600);
    --hover-background: var(--ig-surface-700);
    --active-background: var(--ig-surface-700);
    --disabled-background: var(--ig-gray-100);
    --button-color: var(--ig-gray-700);
    --button-hover-color: var(--ig-gray-800);
    --button-disabled-color: var(--ig-gray-300);
    --border-color: var(--ig-surface-600);
}

igc-tab::part(tab-header) {
    --item-hover-color: var(--ig-success-500);
}

igc-tab::part(tab-header)::before {
    --border-color--hover: var(--ig-gray-500);
}

API Reference

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub