Drawer

Example

import { Drawer } from 'chic-ui';

export const SampleDrawer = () => {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => setOpen(!open);
  return (
    <>
      <button onClick={handleClose}>Open Drawer</button>
      <Drawer
        open={open}
        size="default"
        closable={true}
        placement="bottom"
        header="Header Content"
        footer="Footer content"
        onClose={handleClose}
      >
        <div>Some contents...</div>
        <div> Some contents...</div>
        <div> Some contents...</div>
      </Drawer>
    </>
  );
};

API

import { Drawer } from 'chic-ui';

Name	Type	Default	Description
size	'default' | 'large'	'default'	Size of the drawer. 'default` size is 378px and `large` size is 736px
closable	boolean	true	Boolean to determine if drawer can be closed
placement	'top' | 'right' | 'bottom' | 'left'		Placement of the tooltip
onClose	function		Specify a function that will be called when the Drawer is closed
placement	'left' | 'right' | 'top' | 'bottom'	'right'	Placement of the drawer
open	boolean	false	Boolean to determine if drawer is open
children	ReactNode		Contents of the drawer
header	ReactNode		Header of the drawer
footer	ReactNode		Footer of the drawer
height	number		Height for top and bottom placement. Will override size property
width	number		Width for top and bottom placement. Will override size property
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component
headerStyle	React.CSSProperties		Override default styling of the header
bodyStyle	React.CSSProperties		Override default styling of the contents of the drawer
footerStyle	React.CSSProperties		Override default styling of the footer