0.9.1 • Published 1 year ago
@lion/collapsible v0.9.1
Content >> Collapsible >> Overview ||10
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.
import { html } from '@lion/core';
import '@lion/collapsible/define';
export const main = () => html`
<lion-collapsible>
<button slot="invoker">More about cars</button>
<div slot="content">
Most definitions of cars say that they run primarily on roads, seat one to eight people, have
four tires, and mainly transport people rather than goods.
</div>
</lion-collapsible>
`;
Features
- Use
opened
attribute ortoggle()
method to render default open. invoker
slot can be custom template e.g. our button or nativebutton
with custom styling.- Observe the state with the help of
@opened-changed
event. show()
andhide()
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';
0.5.4
1 year ago
0.9.1
2 years ago
0.9.0
2 years ago
0.5.3
2 years ago
0.5.2
2 years ago
0.5.1
2 years ago
0.8.0
2 years ago
0.7.0
2 years ago
0.6.6
2 years ago
0.6.5
2 years ago
0.6.4
3 years ago
0.6.3
3 years ago
0.6.2
3 years ago
0.6.1
3 years ago
0.6.0
3 years ago
0.5.0
3 years ago
0.4.2
3 years ago
0.4.1
3 years ago
0.4.0
3 years ago
0.3.2
3 years ago
0.3.1
3 years ago
0.3.0
3 years ago
0.2.9
3 years ago
0.2.8
3 years ago
0.2.7
3 years ago
0.2.6
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.2.3
3 years ago
0.2.2
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago