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 });
}