mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Docs: Drawer component (#27267)
* Add documentation and example to mdx * Update packages/grafana-ui/src/components/Drawer/Drawer.mdx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Update packages/grafana-ui/src/components/Drawer/Drawer.mdx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Fix button and update text Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
This commit is contained in:
parent
f323ae6b67
commit
d07755b624
@ -1,4 +1,35 @@
|
||||
import { Props } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Props } from '@storybook/addon-docs/blocks';
|
||||
import { Drawer } from './Drawer';
|
||||
|
||||
<Meta title="MDX|Drawer" component={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](https://grafana.com/docs/grafana/latest/panels/inspect-panel/).
|
||||
|
||||
### Usage
|
||||
```tsx
|
||||
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>
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
<Props of={Drawer} />
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { Drawer } from '@grafana/ui';
|
||||
import { Button, Drawer } from '@grafana/ui';
|
||||
import { UseState } from '../../utils/storybook/UseState';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import mdx from './Drawer.mdx';
|
||||
@ -17,19 +17,14 @@ export default {
|
||||
};
|
||||
|
||||
export const global = () => {
|
||||
const drawerTitle = text('title', 'Storybook');
|
||||
const drawerTitle = text('title', 'Drawer title');
|
||||
|
||||
return (
|
||||
<UseState initialState={{ isOpen: false }}>
|
||||
{(state, updateValue) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{ border: '1px solid gray', borderRadius: '4px', padding: '10px', cursor: 'pointer' }}
|
||||
onClick={() => updateValue({ isOpen: !state.isOpen })}
|
||||
>
|
||||
Open drawer
|
||||
</div>
|
||||
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
|
||||
{state.isOpen && (
|
||||
<Drawer
|
||||
title={drawerTitle}
|
||||
@ -38,15 +33,17 @@ export const global = () => {
|
||||
updateValue({ isOpen: !state.isOpen });
|
||||
}}
|
||||
>
|
||||
<ul>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a</li>
|
||||
<li>list</li>
|
||||
<li>of</li>
|
||||
<li>menu</li>
|
||||
<li>items</li>
|
||||
</ul>
|
||||
<div style={{ padding: '10px' }}>
|
||||
<ul>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a</li>
|
||||
<li>list</li>
|
||||
<li>of</li>
|
||||
<li>menu</li>
|
||||
<li>items</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Drawer>
|
||||
)}
|
||||
</>
|
||||
@ -62,12 +59,7 @@ export const longContent = () => {
|
||||
{(state, updateValue) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{ border: '1px solid gray', borderRadius: '4px', padding: '10px', cursor: 'pointer' }}
|
||||
onClick={() => updateValue({ isOpen: !state.isOpen })}
|
||||
>
|
||||
Open drawer
|
||||
</div>
|
||||
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
|
||||
{state.isOpen && (
|
||||
<Drawer
|
||||
scrollableContent
|
||||
@ -174,12 +166,7 @@ export const inLine = () => {
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ border: '1px solid gray', borderRadius: '4px', padding: '10px', cursor: 'pointer' }}
|
||||
onClick={() => updateValue({ isOpen: !state.isOpen })}
|
||||
>
|
||||
Open drawer
|
||||
</div>
|
||||
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
|
||||
{state.isOpen && (
|
||||
<Drawer
|
||||
inline={true}
|
||||
|
@ -26,6 +26,7 @@ export interface Props {
|
||||
/** Set to true if the component rendered within in drawer content has its own scroll */
|
||||
scrollableContent?: boolean;
|
||||
|
||||
/** Callback for closing the drawer */
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user