Sha256: dddad4742eb3a69176196d96836e3c96018a32d200a780d8f3824da686e0583b
Contents?: true
Size: 1.95 KB
Versions: 30
Compression:
Stored size: 1.95 KB
Contents
import React from 'react'
import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from 'playbook-ui'
const CollapsibleCustomMainWithIcon = () => {
const [isCollapsed, setIsCollapsed] = useCollapsible(true)
return (
<>
<Collapsible
collapsed={isCollapsed}
>
<Background
backgroundColor="white"
cursor="pointer"
htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
position="sticky"
top="0"
>
<Flex
align="center"
gap="sm"
justify="between"
>
<Title
size={4}
text="Custom Main Section"
/>
<Collapsible.Icon collapsed={isCollapsed}/>
</Flex>
</Background>
<Collapsible.Content padding="none">
<div>
<List>
<ListItem
align="stretch"
flexDirection="column"
>
Checklist item
</ListItem>
<ListItem
align="stretch"
flexDirection="column"
>
Checklist item
</ListItem>
<ListItem
align="stretch"
flexDirection="column"
>
Checklist item
</ListItem>
<ListItem
align="stretch"
flexDirection="column"
>
Checklist item
</ListItem>
<ListItem
align="stretch"
flexDirection="column"
>
Checklist item
</ListItem>
</List>
</div>
</Collapsible.Content>
</Collapsible>
</>
)
}
export default CollapsibleCustomMainWithIcon
Version data entries
30 entries across 30 versions & 2 rubygems