@miraidesigns/tabs NPM

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

mirai designs framework tabs

@miraidesigns/base @miraidesigns/button @miraidesigns/fx @miraidesigns/theme @miraidesigns/utils

@infinitebrahmanuniverse/nolb-_mir @everything-registry/sub-chunk-607 @zalastax/nolb-_mir

1.0.0

4 years ago