mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Grafana-UI: Add Collapse docs (#27291)
* Grafana-UI: Add Collapse docs * Grafana-UI: Add comments * Clarify description
This commit is contained in:
parent
7db42f0a3c
commit
b45d5ec594
18
packages/grafana-ui/src/components/Collapse/Collapse.mdx
Normal file
18
packages/grafana-ui/src/components/Collapse/Collapse.mdx
Normal file
@ -0,0 +1,18 @@
|
||||
import { Meta, Preview, Props } from '@storybook/addon-docs/blocks';
|
||||
import {Collapse} from "./Collapse";
|
||||
|
||||
# Collapse
|
||||
|
||||
A content area, which can be horizontally collapsed and expanded. Can be used to hide extra information on the page.
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
<Collapse label="Collapse panel" isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)}>
|
||||
<p>Panel data</p>
|
||||
</Collapse>
|
||||
```
|
||||
|
||||
<Props of={Collapse}/>
|
@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import { Collapse, ControlledCollapse } from './Collapse';
|
||||
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { UseState } from '../../utils/storybook/UseState';
|
||||
import mdx from './Collapse.mdx';
|
||||
|
||||
export default {
|
||||
title: 'Layout/Collapse',
|
||||
component: Collapse,
|
||||
decorators: [withCenteredStory, withHorizontallyCenteredStory],
|
||||
parameters: {
|
||||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const basic = () => {
|
||||
return (
|
||||
<UseState initialState={{ isOpen: false }}>
|
||||
{(state, updateValue) => {
|
||||
return (
|
||||
<Collapse
|
||||
collapsible
|
||||
label="Collapse panel"
|
||||
isOpen={state.isOpen}
|
||||
onToggle={() => updateValue({ isOpen: !state.isOpen })}
|
||||
>
|
||||
<p>Panel data</p>
|
||||
</Collapse>
|
||||
);
|
||||
}}
|
||||
</UseState>
|
||||
);
|
||||
};
|
||||
|
||||
export const controlled = () => {
|
||||
return (
|
||||
<ControlledCollapse label="Collapse panel">
|
||||
<p>Panel data</p>
|
||||
</ControlledCollapse>
|
||||
);
|
||||
};
|
@ -82,11 +82,16 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
`,
|
||||
}));
|
||||
|
||||
interface Props {
|
||||
export interface Props {
|
||||
/** Expand or collapse te content */
|
||||
isOpen?: boolean;
|
||||
/** Text for the Collapse header */
|
||||
label: string;
|
||||
/** Indicates loading state of the content */
|
||||
loading?: boolean;
|
||||
/** Toggle collapsed header icon */
|
||||
collapsible?: boolean;
|
||||
/** Callback for the toggle functionality */
|
||||
onToggle?: (isOpen: boolean) => void;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user