Drawer

The navigation drawers (or “sidebars”) provide ergonomic access to destinations in a site or app functionality such as switching accounts.

Inspirations are here.

Basic Usage

placement, padding Props, border-radius will added automatically when padding is set:


import Spross from 'spross';

// false
const [visible, setVisible] = useState(false);

<Spross.Drawer
  visible={visible}
  onVisibleChange={setVisible}
  placement="right"
  padding={12}
/>

Elevated

Elevated drawer will scale down data-spross-drawer-wrapper when open, you need to set this attribute manually to the wrapper element.

When elevation is set, padding prop will be ignored:


import Spross from 'spross';

// false
const [visible, setVisible] = useState(false);

<Spross.Drawer
  visible={visible}
  onVisibleChange={setVisible}
  placement="bottom"
  elevated
/>

Steps

step prop is used to control the steps of the drawer transition. You need to use it with steps & stepTransitionType prop.

There are two types of stepTransitionType you can choose, slide & fade:


import Spross from 'spross';

// false
const [visible, setVisible] = useState(false);
const [step, setStep] = useState(0);

<Spross.Drawer
  visible={visible}
  onVisibleChange={setVisible}
  placement="bottom"
  padding={12}
  stepTransitionType="fade"
  step={step}
  steps={[<div>1</div>, <div>2</div>]}
/>

API

Props	Description	Type	Default
visible	Whether to show the drawer	boolean	undefined
onVisibleChange	Callback function when the drawer display status changes	function	undefined
padding	The padding of the drawer	number	undefined
placement	The placement of the drawer	"top" \| "left" \| "right" \| "bottom"	right
children	The content of the drawer	React.ReactNode	undefined
className	The class name of the drawer	string	undefined
style	The style of the drawer	React.CSSProperties	undefined
zIndex	The z-index of the drawer	number	undefined