Collapsible: Examples

Custom Invoker Template

A custom template can be specified to the invoker slot. It can be any button or custom component which mimics the button behavior for better accessibility support. In the below example, lion-button and native button with styling is used as a collapsible invoker.

Extended collapsible with animation

LionCollapsible can easily be extended to add more features in the component, like animation for example.

Use _showAnimation() and _hideAnimation() methods to customize open and close behavior. Check the code for a full example of a custom-collapsible.

_showAnimation({ contentNode }) {
    const expectedHeight = await this.__calculateHeight(contentNode);
    contentNode.style.setProperty('opacity', '1');
    contentNode.style.setProperty('padding', '12px 0');
    contentNode.style.setProperty('max-height', '0px');
    await new Promise(resolve => requestAnimationFrame(() => resolve()));
    contentNode.style.setProperty('max-height', expectedHeight);
    await this._waitForTransition({ contentNode });
}

_hideAnimation({ contentNode }) {
    if (this._contentHeight === '0px') {
      return;
    }
    ['opacity', 'padding', 'max-height'].map(prop => contentNode.style.setProperty(prop, 0));
    await this._waitForTransition({ contentNode });
}