@fureinzz/fureinzz-collapse v1.1.2
<fureinzz-collapse>
fureinzz-collapse
creates a collapsible block of content.
Accessible - Collapse uses the animation API for a smooth transition, not javascript, so the component does not load your system for rendering animation.
Works with any framework - the component is based on the native
customElements
technology, which makes it possible to use it together with any library or frameworkWorks with Shadow DOM - Collapse works by using the modern technology of Shadow DOM. This approach improves the experience of using web components
Installation
We recommend using npm for installation
npm install @fureinzz/fureinzz-collapse
Usage
Before using the dialog you must import the component module: ( import "@fureinzz/fureinzz-collapse"
). After adding the module, you can use fureinzz-collapse
in your app
To expand the content you must specify the opened
attribute
<fureinzz-collapse opened>
<span> Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
</fureinzz-collapse>
You can also expand the content using the opened
property or the .open()
and .toggle()
methods
const collapse = document.querySelector("fureinzz-collapse")
collapse.open()
Styling
The component is easy to style, so you can style it as you like
Example of what your collapse might look like:
Properties
When initializing a component each of the properties presented is false by default
- opened - If
true
, the contents of the collapse will open - horizontal - If
true
, the orientation will be changed to horizontal - noAnimation - If
true
, animation will be disabled
Example of how you can set a property in an html file:
<fureinzz-collapse opened no-animation>
<span> Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
</fureinzz-collapse>
Events
The dialog can dispatch 3 types of events to the external environment
- opened-changed - Event that is dispatched when the
opened
state changes - animation-opened-changed - Event that is dispatched when the animation transition ends
const collapse = document.querySelector("fureinzz-collapse")
collapse.addEventListener("opened-changed", event => {
const detail = event.detail
// If the collapse was opened
console.log(detail) // {opened: true}
})