Drawer

Drawer is a simple panel that can be triggered to appear on the right hand side of the screen.

Overview

Drawer is a simple panel that can be triggered to appear on the right hand side of the screen.

The Drawer component.

Usage

The Drawer is used to show more details for a specific item in a list or table. It provides an inline way to view more comprehensive information about the item, including space for forms and images.

Anatomy

Close Button2Sheet1The Drawer anatomy.
  1. Sheet. Much like the Card component, the Drawer Sheet is a blank canvas to add components to.

  2. Close Button. The Close Button triggers the hiding animation, causing the Drawer to slide out to the right of the viewport.

    States

    The Drawer has two states - hidden and visible. By default, the Drawer is hidden off the right hand side of the screen. Clicking on an item that triggers the Drawer will cause the drawer to slide in from the edge of the screen.

    Clicking the Close button will reverse this animation.

Drawer is a simple panel that can be triggered to appear on the right hand side of the screen.

Basic Usage

Arbitrary JSX

<Drawer isOpen onClose={event => console.log}>
  <h1>Arbitrary JSX</h1>
</Drawer>

Avatar Properties

NameTypeRequiredDefaultDescription
classNamestringFalsen/aCustom CSS class to add to the component.
isOpenbooleanFalsen/aisOpen flag indicating the open or closed state of the drawer.
onClosefuncFalsen/aCallback which is invoked when the the drawer is closed.