@miraidesigns/tabs

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