Monster.Components.Form. Tabs

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

Dependencies: the system uses functions of the monsterjs library.

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 'https://cdn.jsdelivr.net/npm/@schukai/[email protected]/dist/modules/tab.js';
document.createElement('monster-tabs');

Constructor

new Tabs()

A configurable tab control

Since
  • 1.10.0

Members

defaults

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

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

To set the options via the html tag the attribute data-monster-options must be set. As value a JSON object with the desired values must be defined.

The JSON can be specified as a DataURI.

new Monster.Types.DataUrl(btoa(JSON.stringify({
       shadowMode: 'open',
       delegatesFocus: true,
       templates: {
           main: undefined
       }
   })),'application/json',true).toString()

The attribute data-monster-options-selector can be used to access a script tag that contains additional configuration.

As value a selector must be specified, which belongs to a script tag and contains the configuration as json.

<script id="id-for-this-config" type="application/json">
   {
       "config-key": "config-value"
   }
</script>

The individual configuration values can be found in the table.

Properties
NameTypeDefaultDescription
templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

labelsObject
Properties
NameTypeDefaultDescription
new-tab-labelstring"New

Tab"

fetchObject

Fetch see Using Fetch mozilla.org

Properties
NameTypeDefaultDescription
redirectStringerror
methodStringGET
modeStringsame-origin
credentialsStringsame-origin
headersObject{"accept":"text/html"}}
popperObject

PopperJS Options

Properties
NameTypeDefaultDescription
placementstringbottom

PopperJS placement

modifiersArray.<Object>{name:offset}

PopperJS placement

Methods

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

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

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.

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

Returns:
Type: 
string

assembleMethodSymbol() → {Monster.Components.Form.Form}

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

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.

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.

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

Returns:
Type: 
void