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 the panel with the corresponding id is displayed. The component could be used with only tabs defined (without any panels).

    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.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    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
cmd
    import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents';

defineComponents(IgcTabsComponent);
ts

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

    Simple IgcTabsComponent declaration is done as follows:

    <igc-tabs>
    <igc-tab panel="first">Tab 1</igc-tab>
    <igc-tab panel="second">Tab 2</igc-tab>
    <igc-tab panel="third">Tab 3</igc-tab>
    <igc-tab-panel id="first">Panel 1</igc-tab-panel>
    <igc-tab-panel id="second">Panel 2</igc-tab-panel>
    <igc-tab-panel id="third">Panel 3</igc-tab-panel>
</igc-tabs>
html

    Selection

    The IgcTabsComponent 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 its panel as string value.

    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 panel="first" disabled>Tab 1</igc-tab>
html

    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.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    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.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Keyboard Navigation

    Keys Description
    ← Selects previous (next in Right-to-Left mode) tab. If activation is set to Manual only focuses the tab. Scrolls to end if on first tab.
    → Selects next (previous in Right-to-Left mode) tab. If activation is set to Manual only focuses the tab. Scrolls to start if on last tab.
    Home Selects the first tab.
    End Selects the last tab.
    Enter / Space Selects the focused tab when activation is Manual

    Prefix / Suffix

    Each tab has default slot to display information - icon, text or both and prefix and suffix slots to show additional content in the beginning and/or in the end.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    Styling

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

    Name Description
    headers The wrapper which includes the tabs and the scroll buttons.
    headers-content The container for the tabs which represents the available space for rendering of the tabs.
    headers-wrapper The wrapper for the tabs and the selected indicator.
    headers-scroll The container for the tabs.
    selected-indicator The selected indicator.
    start-scroll-button The start scroll button displayed when the tabs overflow.
    end-scroll-button The end scroll button displayed when the tabs overflow.
    content The container for the content where the data is displayed.

    The IgcTabComponent component exposes the following CSS parts:

    Name Description
    content The content wrapper.
    prefix The prefix wrapper.
    suffix The suffix wrapper. 
    igc-tabs::part(headers-content) {
  background-color: var(--ig-gray-200);
}

igc-tab::part(content) {
  color: var(--ig-success-500);
}
css

    EXAMPLE
    Edit in:

    API Reference

    Additional Resources