@exmg/exmg-collapsed

<exmg-collapsed>

Collapsed element contains a slot that can be expanded or collapsed to reveal additional content or information.

Demo

Installation

npm install @exmg/exmg-collapsed

Example Usage

Standard

@property({type:  Boolean})
opened = false;

<exmg-button @click=${() => (this.opened = !this.opened)}>Open</exmg-button>

<exmg-collapsed  ?opened=${this.opened}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.
</exmg-collapsed>

API

Slots

Name	Description
default	Default content to display within the collapsible element

Properties/Attributes

Name	Type	Default	Description
opened	boolean	false	The opened state of the component

Methods

Name	Description
toggle	Toggles the opened state of the component
show	Sets the opened state of the component to true
hide	Sets the opened state of the component to false

Events

None

CSS Custom Properties

None

Additional references

• Additional Documentation

• Demo