Collapsible component, allows the user to expand and collapse some enclosed content.
npm install @paprika/collapsibleCollapsible component, allows the user to expand and collapse some enclosed content.
``
yarn add @paprika/collapsible
or with npm:
`
npm install @paprika/collapsible
| Prop | Type | required | default | Description |
| ---------------------- | ------------------ | -------- | ------------------ | --------------------------------------------------------------------------------------------------- |
| a11yText | string | false | null | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
| children | node | false | null | Body content of the collapsible. |
| iconAlign | [ "left", "right"] | false | "left" | Set's icon alignment left or right. |
| iconCollapse | node | false |
| iconExpand | node | false |
| isCollapsed | bool | false | true | State of the collapsible. |
| isDisabled | bool | false | false | If the collapsible is disabled. |
| hasOnlyIconToggle | bool | false | false | |
| label | node | true | - | Sets the label that will display in the collapsible |
| onClick | func | false | () => {} | Callback to be executed when the button is clicked or activated by keyboard. |
| triggerAriaDescribedby | string | false | null | aria-describedby on the trigger element. |
`js
import Collapsible from "@paprika/collapsible";
const [isCollapsed, setIsCollapsed] = React.useState(false);
const yourComponent = () => {
return (
isCollapsed={isCollapsed}
isDisabled={false}
label="Click me to show/hide the content"
iconAlign="left"
onClick={() => setIsCollapsed(!isCollapsed)}
>
Content – children of the <Collapsible> is hidden while the collapsible is collapsed, and
visible with it is expanded.
export default yourComponent;
``
- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG