Tiny and performant collapse component for SolidJS.
npm install solid-collapse!npm !GitHub Workflow Status !npm bundle size
Tiny and performant collapse component for SolidJS.
| 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.
``bash`
yarn add solid-collapsenpm i -S solid-collapse
pnpm add solid-collapse
1. In a CSS file:
`css`
.my-transition {
transition: height 300ms cubic-bezier(0.65, 0, 0.35, 1);
}
2. In a component file:
`jsx
import { createSignal } from 'solid-js';
import { Collapse } from 'solid-collapse';
const App = () => {
const [isExpanded, setIsExpanded] = createSignal(false);
return (
I am a bunch of collapsed text that wants to be expanded
:clock1: Auto Duration
Solid Collapse automatically calculates the optimal duration according to the content height. You can opt-it by referencing the variable
in your transition property:`css
.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
1. Assigning a
to Collapse is not possible. If you need to access its DOM node, you can call document.getElementById inside an onMount` callback.2. You will have to make your UI compliant by manually implementing ARIA practices. Don't worry any example shows how to do that.
MIT Licensed. Copyright (c) Simone Mastromattei 2022.