<exm-collapsed>

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

Demo

Installation

npm install @exmg/exm-collapsed

Example Usage

Standard

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

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

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