Drawer

Basic Usage


import { Drawer } from '@krakentech/coral';
 
const [isOpen, setIsOpen] = useState(false);
 
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
 
<Drawer open={isOpen} onClose={() => setIsOpen(false)}>
    <Container padding="lg">
        <Typography>Your content here</Typography>
    </Container>
</Drawer>

Note: The Drawer component does not have any internal padding, it’s advised to use the Container component and the Stack component to lay out the content inside the Drawer component.

Properties

position


const [isOpen, setIsOpen] = useState(false);
 
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
 
<Drawer
    open={isOpen}
    onClose={() => setIsOpen(false)}
    position="bottom"
>
    <Container padding="lg">
        <Typography>Your content here</Typography>
    </Container>
</Drawer>

disableEscapeKeyDown


const [isOpen, setIsOpen] = useState(false);
 
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
 
<Drawer
    open={isOpen}
    onClose={() => setIsOpen(false)}
    disableEscapeKeyDown
>
    <Container padding="lg">
        <Typography>Your content here</Typography>
    </Container>
</Drawer>

Event Handlers


<Drawer
    onClose={() => {}}
>
    ...
</Drawer>

Full API

Name	Type	Default
`children`	`ReactNode`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`open`	`boolean` If `true`, the Drawer will be open by default.	`false`
`disableEscapeKeyDown`	`boolean` If `true`, the Drawer will not close when the user clicks outside of it.	`false`
`onClose`	`DrawerCloseCallback` A callback fired when the Drawer is closed. `event` The event source of the callback. `reason` The reason the Drawer was closed. ‘backdropClick’ - The user clicked the backdrop. ‘escapeKeyDown’ - The user pressed the escape key. ‘closeButtonClick’ - The user clicked the close button.
`position`	`"right" \| "left" \| "bottom"` The position of the Drawer relative to the viewport.	`right`
`closeButtonAttributes`	`Attributes` Attributes to be applied to the close button. This is useful for passing additional attributes like `aria-label` or `data-testid`.

Design

Good to know

Usual content found within the slide out is:

A card to explain how costs are calculated
Cost breakdown of electricity
Cost breakdown of gas
Semi transparent panel to cover to page behind

This can vary depending on the region.