Collapse
Display large amounts of text in collapsible sections. Commonly referred to as an accordion.
Usage
First of all, you need to import the Collapse
component from the kitchn
package.
import { Collapse } from "kitchn"
Default
<Container gap={"small"}> <Collapse title="Question A"> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Text> </Collapse> <Collapse title="Question B"> <Text> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </Text> </Collapse> </Container>
↓Code Editor
↓Code Editor
<Container gap={"small"}> <Collapse title="Question A"> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Text> </Collapse> <Collapse title="Question B"> <Text> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </Text> </Collapse> </Container>
Expanded
<Container gap={"small"}> <Collapse title="Question A" defaultExpanded> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Text> </Collapse> <Collapse title="Question B"> <Text> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </Text> </Collapse> </Container>
↓Code Editor
↓Code Editor
<Container gap={"small"}> <Collapse title="Question A" defaultExpanded> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Text> </Collapse> <Collapse title="Question B"> <Text> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </Text> </Collapse> </Container>
Subtitle
<Container gap={"small"}> <Collapse title="Question A" subtitle="More description about Question A" > <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Text> </Collapse> <Collapse title="Question B"> <Text> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </Text> </Collapse> </Container>
↓Code Editor
↓Code Editor
<Container gap={"small"}> <Collapse title="Question A" subtitle="More description about Question A" > <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Text> </Collapse> <Collapse title="Question B"> <Text> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </Text> </Collapse> </Container>
Card
<Container gap={"small"}> <Collapse title="Question A" card> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Text> </Collapse> </Container>
↓Code Editor
↓Code Editor
<Container gap={"small"}> <Collapse title="Question A" card> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Text> </Collapse> </Container>
Small
<Container gap={"small"}> <Collapse title="Question A" size="small"> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Text> </Collapse> </Container>
↓Code Editor
↓Code Editor
<Container gap={"small"}> <Collapse title="Question A" size="small"> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Text> </Collapse> </Container>
Props
Name | Type | Default | Required | Description | Accepted values |
---|---|---|---|---|---|
title | string | - | ✅ | The title of the collapse. | - |
subtitle | React.ReactNode | - | - | The subtitle of the collapse. | - |
children | React.ReactNode | - | - | - | |
defaultExpanded | boolean | false | - | The status of the collapse (expanded or not). | - |
card | boolean | - | - | The type of the collapse (whether it's a card or not). | - |
size | string | medium | - | The size of the collapse. | normal , small , medium |