@squiz/xaccel-collapsible v1.15.0-beta.1
Collapsible
Description
A component that provides a header which a user can interact with to toggle the visibility of its respective collapsible body/content.
Properties
Property | Property description | Property type | Is required |
---|---|---|---|
id | Unique ID | string | x |
children | Content | ReactNode[] | x |
isOpen | Toggle the starting visibility of body content | boolean | |
isDisabled | Toggle the ability to show/hide body content | boolean | |
onClick | Callback function run against the Unique ID when the header is clicked | function | |
className | Overwrite ClassName | classNameOverride |
Collapsible Header
Properties
Property | Property description | Property type | Is required |
---|---|---|---|
children | Header Content | ReactNode[] | x |
titleLevel | Heading Level to use (1–6) | string | |
className | Overwrite ClassName | classNameOverride |
Collapsible Body
Properties
Property | Property description | Property type | Is required |
---|---|---|---|
children | Body Content | ReactNode[] | x |
transitionLength | Duration of the open/close transition (in milliseconds) | number | |
className | Overwrite ClassName | classNameOverride |
Usage
import { Collapsible, CollapsibleHeader, CollapsibleBody } from '@squiz/xaccel-collapsible';
<Collapsible id="12345" isOpen="true" isDisabled="false" onClick={() => { /* ... */ }}>
<CollapsibleHeader titleLevel="h3">Header</CollapsibleHeader>
<CollapsibleBody transitionLength={250}>TestBody</CollapsibleBody>
</Collapsible>
For more information about className
please visit packages/utility/functions/src/generateClasses.js
21 days ago
21 days ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago