Monster.Components.Form. 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/component-form/source/tab.js';
document.createElement('monster-tabs');

Constructor

new Tabs()

A configurable tab control

Since
  • 1.10.0
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.

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

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

See

(static) instanceSymbol

This method is called by the instanceof operator.

This method is called by the instanceof operator.

Since
  • 2.1.0

Methods

assembleMethodSymbol()

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

(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