mirror of https://github.com/grafana/grafana
Storybook: update docs for Layout (#23288)
* Storybook: expand layout docs * Search: Ad align prop * Search: Default align to normal * Search: Expand docspull/23318/head
parent
5645d74cbc
commit
002ebc9cbb
@ -0,0 +1,104 @@ |
||||
import { Story, Preview, Props } from '@storybook/addon-docs/blocks'; |
||||
import { Layout, HorizontalGroup, VerticalGroup } from './Layout'; |
||||
import { Button } from '../Button'; |
||||
import { Select } from '../index'; |
||||
|
||||
# Layout |
||||
|
||||
## Generic |
||||
|
||||
Used for aligning items in specified orientation. Useful for multiple elements that need to be arranged in rows or columns. |
||||
|
||||
Expects multiple elements as `children` prop. This is the base for more specialised `Horizontal-` and `VerticalGroup` components. |
||||
|
||||
### Props |
||||
<Props of={Layout} /> |
||||
|
||||
## Horizontal |
||||
|
||||
Used for horizontally aligning several elements (e.g. Button, Select) with a predefined spacing between them. |
||||
<Preview> |
||||
<HorizontalGroup> |
||||
<Button>Button 1</Button> |
||||
<Button>Button 2</Button> |
||||
<Button>Button 3</Button> |
||||
</HorizontalGroup> |
||||
</Preview> |
||||
|
||||
<Preview> |
||||
<HorizontalGroup> |
||||
<Select |
||||
size='sm' |
||||
onChange={() => {}} |
||||
options={[ |
||||
{ value: 1, label: 'Option 1' }, |
||||
{ value: 2, label: 'Option 2' }, |
||||
]} |
||||
/> |
||||
<Select |
||||
size='sm' |
||||
onChange={() => {}} |
||||
options={[ |
||||
{ value: 1, label: 'Option 1' }, |
||||
{ value: 2, label: 'Option 2' }, |
||||
]} |
||||
/> |
||||
<Select |
||||
size='sm' |
||||
onChange={() => {}} |
||||
options={[ |
||||
{ value: 1, label: 'Option 1' }, |
||||
{ value: 2, label: 'Option 2' }, |
||||
]} |
||||
/> |
||||
</HorizontalGroup> |
||||
</Preview> |
||||
|
||||
|
||||
### Props |
||||
<Props of={HorizontalGroup} /> |
||||
|
||||
|
||||
## Vertical |
||||
|
||||
Used for vertically aligning several elements (e.g. Button, Select) with a predefined spacing between them. |
||||
<Preview> |
||||
<VerticalGroup> |
||||
<Button>Button 1</Button> |
||||
<Button>Button 2</Button> |
||||
<Button>Button 3</Button> |
||||
</VerticalGroup> |
||||
</Preview> |
||||
|
||||
<Preview> |
||||
<VerticalGroup justify='center'> |
||||
<Select |
||||
size='sm' |
||||
onChange={() => {}} |
||||
options={[ |
||||
{ value: 1, label: 'Option 1' }, |
||||
{ value: 2, label: 'Option 2' }, |
||||
]} |
||||
/> |
||||
<Select |
||||
size='sm' |
||||
onChange={() => {}} |
||||
options={[ |
||||
{ value: 1, label: 'Option 1' }, |
||||
{ value: 2, label: 'Option 2' }, |
||||
]} |
||||
/> |
||||
<Select |
||||
size='sm' |
||||
onChange={() => {}} |
||||
options={[ |
||||
{ value: 1, label: 'Option 1' }, |
||||
{ value: 2, label: 'Option 2' }, |
||||
]} |
||||
/> |
||||
</VerticalGroup> |
||||
</Preview> |
||||
|
||||
|
||||
### Props |
||||
<Props of={VerticalGroup} /> |
Loading…
Reference in new issue