Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Collapsible: Overview

A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an animation to disclose the extra content. There are two slots available respectively; invoker to specify the collapsible's invoker and content for the extra content of the collapsible.

Features

  • Use opened attribute or toggle() method to render default open.
  • invoker slot can be custom template e.g. our button or native button with custom styling.
  • Observe the state with the help of @opened-changed event.
  • show() and hide() are helper methods to hide or show the content from outside.

Installation

npm i --save @lion/collapsible
import { LionCollapsible } from '@lion/collapsible';
// or
import '@lion/collapsible/define';