import { Meta, ArgTypes } from '@storybook/blocks'; import { Drawer } from './Drawer';

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

tsx

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

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

return (
  <Drawer title="This a Drawer" size="md" onClose={this.onClose}>
    <div>Put your Drawer content here</div>
  </Drawer>
);

Sizes

The Drawer supports 3 sizes: sm, md, and lg. This option defines a width in percentage and as well as a min-width.

sm: width = 25vh and min-width = 384px
md: width = 50vh and min-width = 568px
lg: width = 75vh and min-width = 744px

Props