Class: Details

The Details component is used to show a details.

Dependencies: the system uses functions of the monsterjs library

You can create this control either by specifying the HTML tagdirectly in the HTML or using Javascript via thedocument.createElement('monster-details');` method.

<monster-details></monster-details>

Or you can create this CustomControl directly in Javascript:

import '@schukai/component-state/source/details.mjs';
document.createElement('monster-details');

The Body should have a class "hidden" to ensure that the styles are applied correctly.

body.hidden {
   visibility: hidden;
}

Constructor

new Details()

A simple details component

Copyright: schukai GmbH

Fires:

Monster.Components.Host.Details.event:monster-details-before-open
Monster.Components.Host.Details.event:monster-details-open
Monster.Components.Host.Details.event:monster-details-before-close
Monster.Components.Host.Details.event:monster-details-closed

Members

defaults

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

Properties

Name Type Description

templates

Object

Template definitions

Properties

Name	Type	Description
`main`	string	Main template

classes

Object

CSS classes

Properties

Name	Type	Description
`button`	string	CSS class for the button

button

Object

Button configuration

Properties

Name	Type	Description
`label`	string	Button label

features

Object

Feature configuration

Properties

Name	Type	Description
`accordion`	boolean	Enable accordion mode
`persistState`	boolean	Persist the state in the host configuration

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.

Methods

assembleMethodSymbol() → {Monster.Components.Host.Details}

Returns:

Type:: Monster.Components.Host.Details

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

Returns:

Type:: Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:

Type:: string