Menu Icon

Drawer

A drawer is a panel displayed on edge of same page to give an information and/or allow action operation. They let users get notification and/or perform subtasks.

Usage

Placement comes with four different types to use. They organize location of drawer on page.

Guidance

  • Drawers should indicate a title.
  • Their purpose and operations should be articulable and easy discoverable.

When to use

  • Use Drawers for being carried out any subtask and/or giving notifications while keeping user on same page.

Additional info

  • Consider configuring width to size.
  • Consider using closable to allow user to close panel by clicking on X icon on the edge.
  • Consider using mask not to allow user to do any operation on page before closing panel.

Variations

  • There are four types of placements of Drawers.
  • The updatable properties of Drawers are title, placement and width.
  • The updatable behaviours of Drawers are closable, mask, keyboard and forceRender.
  • The updatable style features of Drawers are margin, padding, background, border, effects and css.
  • The updatable style features of Drawer Content are margin, padding, background, border, effects and css.
  • The updatable style features of Drawer Content Body/Header are margin, padding, background, border, effects and css.
  • The updatable style features of Mask are background and css.
  • The usable dynamic properties of Drawers are title, width, placement, closable, mask, keyboard, height, forceRender, hidden and style.

Hints

  • Consider using Drawer with Textarea to display any explanations on it.
  • Consider adding flow(s) to be processed subtask(s) by user.