Drawer

When to use

Drawer is a slide in overlay that can be used to display additional information without hiding the main page content. It can be anchored to the left or right edge of the screen.

One example of the Drawer in use is in Grafana's panel inspector.

Usage


import { Drawer } from '@grafana/ui';

onClose = () => {
  // handle the show or hide Drawer logic
}

return (
  <Drawer
    title="This a Drawer"
    width="60%"
    onClose={this.onClose}
  >
    <div>
       Put your Drawer content here
    </div>
  </Drawer>
)

Name	Description	Default
title	Title shown at the top of the drawer ReactNode	-
subtitle	Subtitle shown below the title ReactNode	-
closeOnMaskClick	Should the Drawer be closable by clicking on the mask, defaults to true boolean	true
inline	Render the drawer inside a container on the page boolean	false
width	Either a number in px or a string with unit postfix stringnumber	40%
expandable	Should the Drawer be expandable to full width boolean	false
scrollableContent	Set to true if the component rendered within in drawer content has its own scroll boolean	false
onClose*	Callback for closing the drawer () => void	-

No Preview

Drawer

When to use

Usage