Tabs

This CustomControl creates a tab element with a variety of options.

Import

import { Tabs } from "@schukai/monster/source/components/layout/tabs.mjs";

Source

View source code

Package

@schukai/monster

Since

3.74.0

This is the first tab, it is active!

This tab is now, as you can see, obviously the active tab.

This is the third tab, without a label.

This tab can be closed; this can be seen from the X in the top right corner.

Introduction

This is a versatile web component. More than just a simple UI element, this component serves as a key element for enhancing interactivity and engagement within various web applications. Whether you are developing a basic website or a complex enterprise-level application, this component is designed to improve user interaction and satisfaction.

Key Features

Dynamic interaction: Users can interact with content dynamically, making the web experience more intuitive and user-centric.
Customizable appearance: Customize the appearance of the component to match the design of your brand or application, ensuring visual consistency.
Accessibility: Designed with accessibility in mind to ensure that all users have a seamless experience, regardless of their browsing environment.
Visual feedback effect: Provides subtle touch feedback to enhance user interaction, making actions more responsive and engaging.
Programmatic Control: Offers methods such as trigger, focus, and deactivate, allowing developers to control the component's behavior programmatically and offering greater flexibility.

Improving the user experience

This component goes beyond its traditional functionality to offer an enhanced and interactive user experience. The combination of visual feedback effects and dynamic interaction with content is not only visually appealing, but also provides clear and responsive feedback to user actions, making the web environment more intuitive and user-friendly.

These improvements are supported by user studies that demonstrate a positive impact on user engagement and satisfaction.

Efficiency in the development process

Integrating this component into your development process is straightforward. Its compatibility with standard web technologies and ease of customization ensure seamless integration with your existing tools and libraries. Whether you're working on a small project or a large-scale application, the modular design of this component guarantees easy integration, streamlining your development process and enhancing productivity.

Simple Tabs

In this example, we have a simple tab component. The tabs are added using divs. When displayed, no tab is active and all are closed. The headings of the tabs are taken directly from the content.

If you want to assign a custom title – and you’ll almost always want to (like with the third tab) – you need to use the `data-monster-button-label` attribute.

tab 1

tab 2

my tab content

Javascript

import "@schukai/monster/source/components/content/tabs.mjs";

HTML

<monster-tabs>
    <div>tab 1</div>
    <div>tab 2</div>
    <div data-monster-button-label="my Tab">my tab content</div>
</monster-tabs>

Stylesheet

/** no additional stylesheet is defined **/

Active Tabs

In this example, we have simply added the class active to the tab. This means that the tab that has this class is active.

Active tab

Additional tab

Javascript

import '@schukai/monster/source/components/layout/tabs.mjs';

HTML

<monster-tabs>
    <div class="active">Active tab</div>
    <div>Additional tab</div>
</monster-tabs>

Stylesheet

/** no additional stylesheet is defined **/

Removable Tabs

In this example, we have added the class active to the first tab. This means that the tab that has this class is active. Additionally, both have the attribute data-monster-removable. This allows users to remove the tabs. Which tab becomes active after deletion can be controlled using the features.removeBehavior property.

Following values are allowed for the features.removeBehavior property:

auto: The tab that becomes active after deletion is determined automatically.
next: The tab that becomes active after deletion is the next tab, if no next tab is available, no tab becomes active.
previous: The tab that becomes active after deletion is the previous tab, if no previous tab is available, no tab becomes active.
none: No tab becomes active after deletion.

Active tab

Additional tab

Javascript

import '@schukai/monster/source/components/layout/tabs.mjs';

HTML

<monster-tabs>
    <div class="active" data-monster-removable>Active tab</div>
    <div data-monster-removable>Additional tab</div>
</monster-tabs>

Stylesheet

/** no additional stylesheet is defined **/

Tabs With Icon

In this example, we add an icon to the tab. The icon is provided as an SVG string within the attribute `data-monster-button-icon`. The icon is displayed in the tab bar, but not within the tab's content.

For this purpose, we use a Data URL that contains the SVG image as a string. Alternatively, you can use a URL pointing to an SVG file. data-monster-button-icon="data:image/svg+xml,%3Csvg ...

tab 1

tab 2

my tab content

Javascript

import "@schukai/monster/source/components/content/tabs.mjs";

HTML

<monster-tabs>
    <div data-monster-button-icon="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='m8 2.42-.717-.737c-1.13-1.161-3.243-.777-4.01.72-.35.685-.451 1.707.236 3.062C4.16 6.753 5.52 8.32 8 10.042c2.479-1.723 3.839-3.29 4.491-4.577.687-1.355.587-2.377.236-3.061-.767-1.498-2.88-1.882-4.01-.721zm-.49 8.5c-10.78-7.44-3-13.155.359-10.063q.068.062.132.129.065-.067.132-.129c3.36-3.092 11.137 2.624.357 10.063l.235.468a.25.25 0 1 1-.448.224l-.008-.017c.008.11.02.202.037.29.054.27.161.488.419 1.003.288.578.235 1.15.076 1.629-.157.469-.422.867-.588 1.115l-.004.007a.25.25 0 1 1-.416-.278c.168-.252.4-.6.533-1.003.133-.396.163-.824-.049-1.246l-.013-.028c-.24-.48-.38-.758-.448-1.102a3 3 0 0 1-.052-.45l-.04.08a.25.25 0 1 1-.447-.224l.235-.468ZM6.013 2.06c-.649-.18-1.483.083-1.85.798-.131.258-.245.689-.08 1.335.063.244.414.198.487-.043.21-.697.627-1.447 1.359-1.692.217-.073.304-.337.084-.398'/%3E%3C/svg%3E">tab 1</div>
    <div>tab 2</div>
    <div data-monster-button-label="my Tab">my tab content</div>
</monster-tabs>

Stylesheet

/** no additional stylesheet is defined **/

Fetch Tab Content From URL

In this example, the content of the tabs is dynamically loaded. The URL of the content is stored in the data-monster-url attribute. The content is then fetched using the Fetch API and inserted into the tab content.

The data-monster-reload attribute can be used to define whether the content should be reloaded every time the tab is switched or, if the value is set to onshow or the attribute is not present, the tab is only loaded when it is shown for the first time.

Javascript

import "@schukai/monster/source/components/content/tabs.mjs";

HTML

<monster-tabs>
    <div data-monster-button-label="load on show"
         data-monster-url="/assets/examples/monster.html"
         data-monster-reload="onshow"></div>

    <div data-monster-button-label="load every time ?"
         data-monster-reload="true"
         data-monster-url="/assets/examples/monster.html"></div>
</monster-tabs>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The Monster Tabs component is built using the Shadow DOM, ensuring encapsulation of its internal structure and styles. The shadow root isolates internal elements from the rest of the page, preventing external styles or scripts from affecting the layout or behavior of the tabs.

Shadow DOM and Accessibility

With the Shadow DOM, direct access to the component's internal elements is restricted. This design prevents unintended changes from outside sources and ensures consistent behavior. Accessibility is maintained through structured content and proper support for keyboard navigation and assistive technologies.

Customizing Through Exported Parts

To enable customization while maintaining encapsulation, the Monster Tabs component exposes specific exported parts. These parts can be styled using the CSS part selector, allowing targeted customization.

Available Part Attributes

control: Represents the entire control panel of the tabs, including the navigation bar and additional buttons. Use this part to style the container's layout or background.
nav: Targets the tab navigation area, where individual tabs are displayed.
button: Represents an individual tab button. Use this to customize the appearance of each tab.
remove-tab: Targets the close icon for removable tabs.
popper: Refers to the overflow dropdown container when there are too many tabs to fit.
switch: Targets the switch button that triggers the overflow dropdown.

Below is an example of how to customize the appearance of the tab buttons and the control panel using CSS part attributes.


monster-tabs::part(control) {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

monster-tabs::part(button) {
    color: #333;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

Explanation of the Example

monster-tabs::part(control): Adds a light background and a bottom border to the entire control area.
monster-tabs::part(button): Styles individual tab buttons with padding and a transition effect.
monster-tabs::part(button):hover: Changes the button's appearance when hovered, enhancing the user experience.

Accessibility

The Monster Tabs component prioritizes accessibility by supporting:

Keyboard Navigation: Users can navigate between tabs using the Tab and arrow keys.
ARIA Roles: Proper ARIA roles are used to provide context to screen readers.
Focus Management: Focus is managed to ensure intuitive and seamless navigation.

By following these best practices, the component delivers a user-friendly and inclusive experience for all users.

HTML Structure

<monster-tabs></monster-tabs>

JavaScript Initialization

const element = document.createElement('monster-tabs');
document.body.appendChild(element);

Exported

Tabs

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

object

labels

string

labels.new-tab-label="New Tab"

object

features

features.openDelay

number

500

nds

features.removeBehavior

string

auto

, next, previous and none

features.openFirst

boolean

true

fetch

object

Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

string

fetch.redirect=error

string

fetch.method=GET

string

fetch.mode=same-origin

string

fetch.credentials=same-origin

object

fetch.headers={"accept":"text/html"}}

popper

object

[PopperJS Options](https://popper.js.org/docs/v2/)

popper.placement

string

bottom

modifiers

object[]

{name:offset}

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Behavioral methods

addTab(content,)

Parameters

content: content
undefined: active

This method is called internal and should not be called directly.

removeTab(tabId)

Parameters

tabId: tabId

This method is called internal and should not be called directly.

Structural methods

getActiveTab()

Returns

{string|null}

A function that returns the name or id of the currently active tab. The tabs have to be named with the data-monster-name attribute.

getTabs()

This method is called internal and should not be called directly.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

This method is called internal and should not be called directly.

getTag()

Returns

{string}

This method is called internal and should not be called directly.

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

This method is called internal and should not be called directly.

connectedCallback()

Returns

{void}

This method is called by the dom and should not be called directly.

disconnectedCallback()

Returns

{void}

This method is called by the dom and should not be called directly.

Other methods

activeTab(idOrName)

Parameters

idOrName {type}: - the name or id of the tab to activate

Returns

{tabs}: The current instance

A function that activates a tab based on the provided name. The tabs have to be named with the data-monster-name attribute.

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.