Monster.Components.Host. Collapse

The Collapse 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-collapse');` method.

<monster-collapse></monster-collapse>

Or you can create this CustomControl directly in Javascript:

import '@schukai/monster/source/components/host/collapse.mjs';
document.createElement('monster-collapse');

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

body.hidden {
   visibility: hidden;
}

Constructor

new Collapse()

A simple collapse component

Copyright
  • schukai GmbH
Fires:
  • Monster.Components.Host.Collapse.event:monster-collapse-before-open
  • Monster.Components.Host.Collapse.event:monster-collapse-open
  • Monster.Components.Host.Collapse.event:monster-collapse-before-close
  • Monster.Components.Host.Collapse.event:monster-collapse-closed
  • Monster.Components.Host.Collapse.event:monster-collapse-adjust-height

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
NameTypeDescription
templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

classesObject

CSS classes

Properties
NameTypeDescription
containerstring

CSS class for the container

featuresObject

Feature configuration

Properties
NameTypeDescription
accordionboolean

Enable accordion mode

persistStateboolean

Enable persist state (Host and Config-Manager required)

useScrollValuesboolean

Use scroll values (scrollHeight) instead of clientHeight for the height calculation

See

(static) instanceSymbol

This method is called by the instanceof operator.

This method is called by the instanceof operator.

Methods

adjustHeight() → {Monster.Components.Host.Collapse}

This method is called when the element is inserted into a document, including into a shadow tree.

This method is called when the element is inserted into a document, including into a shadow tree.

Fires:
  • Monster.Components.Host.Collapse.event:monster-collapse-adjust-height
Returns:
Type: 
Monster.Components.Host.Collapse

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

Returns:
Type: 
Monster.Components.Host.Collapse

close() → {Monster.Components.Host.Collapse}

Fires:
  • Monster.Components.Host.Collapse.event:monster-collapse-before-close
  • Monster.Components.Host.Collapse.event:monster-collapse-closed
Returns:
Type: 
Monster.Components.Host.Collapse

connectedCallback()

disconnectedCallback()

isClosed() → {boolean}

Returns:
Type: 
boolean

isOpen() → {boolean}

Returns:
Type: 
boolean

open() → {Monster.Components.Host.Collapse}

Fires:
  • Monster.Components.Host.Collapse.event:monster-collapse-before-open
  • Monster.Components.Host.Collapse.event:monster-collapse-open
Returns:
Type: 
Monster.Components.Host.Collapse

toggle() → {Monster.Components.Host.Collapse}

Returns:
Type: 
Monster.Components.Host.Collapse

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

Returns:
Type: 
Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:
Type: 
string