Class: Tabs

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

You can create this control either by specifying the HTML tag <monster-tabs /> directly in the HTML or using Javascript via the document.createElement('monster-tabs'); method.

<monster-tabs></monster-tabs>

Or you can create this CustomControl directly in Javascript:

import {Tabs} from '@schukai/monster/components/layout/tabs.mjs';
document.createElement('monster-tabs');

Constructor

new Tabs()

A configurable tab control

Since: 1.10.0
Copyright: schukai GmbH

Fires:

Example

Create a simple tab control

<monster-tabs>
    <div id="tab1">Tab 1</div>
    <div id="tab2">Tab 2</div>
</monster-tabs>

Members

defaults

To set the options via the html tag the attribute data-monster-options must be used.

Properties

Name Type Default Description

templates

Object

Template definitions

Properties

Name	Type	Description
`main`	string	Main template

labels

Object

Properties

Name	Type	Default	Description
`new-tab-label`	string	"New	Tab"

features

Object

Properties

Name	Type	Default	Description
`openDelay`	number	500	Open delay in milliseconds

fetch

Object

Fetch see Using Fetch mozilla.org

Properties

Name	Type	Default
`redirect`	String	error
`method`	String	GET
`mode`	String	same-origin
`credentials`	String	same-origin
`headers`	Object	{"accept":"text/html"}}

popper

Object

PopperJS Options

Properties

Name	Type	Default	Description
`placement`	string	bottom	PopperJS placement

modifiers

Array.<Object>

{name:offset}

PopperJS placement

See: https://monsterjs.org/en/doc/#configurate-a-monster-control The individual configuration values can be found in the table.

(static) instanceSymbol

This method is called by the instanceof operator.

Since: 2.1.0

Methods

activeTab(idOrName) → {Tabs}

A function that activates a tab based on the provided name.

The tabs have to be named with the data-monster-name attribute.

Parameters:

Name	Type	Description
`idOrName`	type	the name or id of the tab to activate

Returns:

The current instance

Type:: Tabs

assembleMethodSymbol()

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

connectedCallback() → {void}

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

Returns:

Type:: void

disconnectedCallback() → {void}

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

Returns:

Type:: void

getActiveTab() → {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.

Returns:

Type:: string | null

(static) getCSSStyleSheet() → {Array.<CSSStyleSheet>}

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

Returns:

Type:: Array.<CSSStyleSheet>

(static) getTag() → {string}

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

Returns:

Type:: string