1.1.0 • Published 1 year ago
solid-collapse v1.1.0
Solid Collapse
Tiny and performant collapse component for SolidJS.
:jigsaw: API
Prop | Description | Type | Default | Required |
---|---|---|---|---|
value | Boolean value to control collapse | boolean | true | :white_check_mark: |
class | Class with a (height)transition property | string | '' | :white_check_mark: |
as | Element tag to render instead of div | string | div | :x: |
onExpanded | Callback on expand transition completed. | () => void | () => {} | :x: |
onCollapsed | Callback on collapse transition completed | () => void | () => {} | :x: |
id
, role
and aria-labelledby
are also supported.
:hammer: Installation
yarn add solid-collapse
# npm i -S solid-collapse
# pnpm add solid-collapse
:lollipop: Usage
1. In a CSS file:
.my-transition {
transition: height 300ms cubic-bezier(0.65, 0, 0.35, 1);
}
2. In a component file:
import { createSignal } from 'solid-js';
import { Collapse } from 'solid-collapse';
const App = () => {
const [isExpanded, setIsExpanded] = createSignal(false);
return (
<div>
<button onClick={() => setIsExpanded(!isExpanded())}>Expand me</button>
<Collapse value={isExpanded()} class="my-transition">
<p class="my-content-class">
I am a bunch of collapsed text that wants to be expanded
</p>
</Collapse>
</div>
);
};
:clock1: Auto Duration
Solid Collapse automatically calculates the optimal duration according to the content height. You can opt-it by referencing the variable --sc-auto-duration
in your transition property:
.my-transition {
transition: height var(--sc-auto-duration) cubic-bezier(0.65, 0, 0.35, 1);
}
:cyclone: For loops, accordions
Please check the examples on the demo website.
:no_mouth: Caveats
Assigning a
ref
to Collapse is not possible. If you need to access its DOM node, you can calldocument.getElementById
inside anonMount
callback.You will have to make your UI compliant by manually implementing ARIA practices. Don't worry any example shows how to do that.
:dvd: License
MIT Licensed. Copyright (c) Simone Mastromattei 2022.