Skip to content

Demos

Basic Drawer

<Drawer
title="Drawer title"
triggerAttributes={{
text: 'Open drawer',
}}
>
<P top>Some informational content</P>
<P top>
Elementum eu suspendisse sit platea elit porttitor magna laoreet ad
ultrices tempus urna curae parturient conubia quisque viverra eget
vestibulum neque pulvinar semper vulputate id dis varius pellentesque
nunc egestas risus amet mus aptent luctus imperdiet netus natoque
cubilia mattis nostra proin ornare scelerisque sodales faucibus
placerat sem bibendum pretium rutrum vitae sociis ligula inceptos morbi
quam mi sed pharetra fermentum tortor ullamcorper ipsum tellus eros
euismod volutpat nisl dui lectus fames suscipit phasellus praesent
justo mollis montes velit taciti gravida
</P>
</Drawer>

Basic Drawer left placement

<Drawer title="Drawer title" containerPlacement="left">
<P top>Some informational content</P>
<P top>
Elementum eu suspendisse sit platea elit porttitor magna laoreet ad
ultrices tempus urna curae parturient conubia quisque viverra eget
vestibulum neque pulvinar semper vulputate id dis varius pellentesque
nunc egestas risus amet
</P>
</Drawer>

Basic Drawer in fullscreen

<Drawer
fullscreen
title="Drawer title"
triggerAttributes={{
text: 'Open drawer',
}}
>
<P top>Some informational content</P>
<P top>
Elementum eu suspendisse sit platea elit porttitor magna laoreet ad
ultrices tempus urna curae parturient conubia quisque viverra eget
vestibulum neque pulvinar semper vulputate id dis varius pellentesque
nunc egestas risus amet
</P>
</Drawer>

Drawer with custom content

<Drawer title="Custom title">
<Drawer.Navigation>
<Breadcrumb onClick={handleBack} />
</Drawer.Navigation>
<Drawer.Header>
<P bottom>This is a lorem ipsum dolor</P>
<Button bottom size="large">
Lorem ipsum
</Button>
<Button bottom size="large" variant="secondary">
Dolor sit
</Button>
<FormStatus state="info">This is a lorem ipsum dolor</FormStatus>
<Tabs
id="unique-linked-id"
data={[
{
title: 'One',
key: 'one',
},
{
title: 'Two',
key: 'two',
},
]}
/>
</Drawer.Header>
<Drawer.Body>
<Tabs.Content id="unique-linked-id">
{({ title }) => {
return (
<>
<H2>{title}</H2>
<P top>This is a left aligned Drawer content.</P>
<P top>
Elementum eu suspendisse sit platea elit porttitor magna
laoreet ad ultrices tempus urna curae parturient conubia
quisque viverra eget vestibulum neque pulvinar semper
vulputate id dis varius pellentesque nunc egestas risus amet
mus aptent luctus imperdiet netus natoque cubilia mattis
nostra proin ornare scelerisque sodales faucibus placerat sem
bibendum pretium rutrum vitae sociis ligula inceptos morbi
quam mi sed pharetra fermentum tortor ullamcorper ipsum
tellus eros euismod volutpat nisl dui lectus fames suscipit
phasellus praesent justo mollis montes velit taciti gravida
lacus commodo senectus feugiat lorem etiam consequat
penatibus cum hendrerit accumsan orci potenti purus nulla
</P>
</>
)
}}
</Tabs.Content>
</Drawer.Body>
</Drawer>

Customize trigger button

<Drawer
title="Drawer with custom trigger"
triggerAttributes={{
text: 'Custom trigger',
variant: 'primary',
size: 'large',
icon: 'loupe',
icon_position: 'left',
}}
>
<Drawer.Body spacing>
<P>Opened a Drawer with a custom trigger button!</P>
</Drawer.Body>
</Drawer>

Close Drawer by callback method

<Drawer
title="Drawer title"
triggerAttributes={{
text: 'Open drawer',
}}
hideCloseButton
>
{({ close }) => (
<>
<Button text="Close by callback" on_click={close} />
</>
)}
</Drawer>

Remove animation and spacing

<Drawer
title="No spacing or animation"
noAnimation
spacing={false}
hideCloseButton
>
<Drawer.Body>
<P top bottom>
This is a lorem ipsum dolor
</P>
<Button bottom size="large">
Lorem ipsum
</Button>
<Button bottom size="large" variant="secondary">
Dolor sit
</Button>
<FormStatus state="info">This is a lorem ipsum dolor</FormStatus>
</Drawer.Body>
</Drawer>