Tabs

Tabs allow you to organize content into different panels or screens.

HTML

<div class="mdf-tabs">
    <div class="mdf-tabs__bar">
        <button class="mdf-tabs__tab mdf-tabs__tab--selected" role="tab" aria-selected="true">
            <span class="mdf-tabs__content">
                <span class="mdf-tabs__text">Tab 1</span>
            </span>

            <span class="mdf-tabs__selection"></span>
        </button>

        <button class="mdf-tabs__tab" role="tab" aria-selected="false" tabindex="-1">
            <span class="mdf-tabs__content">
                <span class="mdf-tabs__text">Tab 2</span>
            </span>

            <span class="mdf-tabs__selection"></span>
        </button>

        <button class="mdf-tabs__tab" role="tab" aria-selected="false" tabindex="-1">
            <span class="mdf-tabs__content">
                <span class="mdf-tabs__text">Tab 3</span>
            </span>

            <span class="mdf-tabs__selection"></span>
        </button>
    </div>

    <div class="mdf-tabs__panels">
        <div class="mdf-tabs__panel mdf-tabs__panel--active" role="tabpanel" tabindex="0">
            Panel 1
        </div>

        <div class="mdf-tabs__panel" role="tabpanel" tabindex="0">
            Panel 2
        </div>

        <div class="mdf-tabs__panel" role="tabpanel" tabindex="0">
            Panel 3
        </div>
    </div>
</div>

Sass

// Include default styles without configuration
@forward '@miraidesigns/tabs/styles';

// Configure appearance
@use '@miraidesigns/tabs' with (
    $variable: value
);

@include tabs.styles();

TypeScript

import { MDFTabs } from '@miraidesigns/tabs';

new MDFTabs(document.querySelector('.mdf-tabs'));

Implementation

Attributes

Please see the WAI-ARIA page for attributes and best practices regarding tabs.

Classes

| Name | Type | Description | | -------------------------- | -------------- | ------------------------------------------------------------------------ | | mdf-tabs | Parent | Contains the tabs elements | | mdf-tabs__bar | Parent / Child | Horizontal grid containing the tabs. Child to .mdf-tabs | | mdf-tabs__bar--left | Modifier | Move the tabs to the left of the grid | | mdf-tabs__bar--right | Modifier | Move the tabs to the right of the grid | | mdf-tabs__bar--stretched | Modifier | Evenly stretch the tabs across the entire container width | | mdf-tabs__tab | Parent / Child | Contains the tab content. Child to .mdf-tabs__bar | | mdf-tabs__tab--selected | Modifier | Set tab as selected | | mdf-tabs__tab--stacked | Modifier | Moves the icon on top of the text | | mdf-tabs__content | Parent / Child | Contains the tab text, icon and selection bar. Child to .mdf-tabs__tab | | mdf-tabs__text | Child | Tab text description. Child to .mdf-tabs__content | | mdf-tabs__selection | Child | Selection bar, shows active tab. Child to .mdf-tabs__content | | mdf-tabs__panels | Parent / Child | Contains the tab panel elements. Child to .mdf-tabs | | mdf-tabs__panel | Child | Tab panel element. Child to .mdf-tabs__panels | | mdf-tabs__panel--active | Child | Set panel as active |

Events

| Name | Data | Description | | ----------------- | ------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | MDFTabs:changed | {index: number, tab: HTMLElement, panel: HTMLElement} | Fires whenever the active tab changes. Includes the current index, tab and panel element |

Properties

| Name | Type | Description | | ------------ | --------------- | --------------------------------------------- | | .container | HTMLElement | Returns the container element | | .panels | HTMLElement[] | Returns an Array holding all panel elements | | .tabs | HTMLElement[] | Returns an Array holding all tabs elements |