112 lines
2.5 KiB
Plaintext
112 lines
2.5 KiB
Plaintext
---
|
|
name: ButtonGroup
|
|
menu: General
|
|
route: components/buttonGroup
|
|
---
|
|
|
|
import { Playground, Props } from 'docz';
|
|
import { ButtonGroup, Button, IconButton, Icon } from '@ohif/ui';
|
|
|
|
# ButtonGroup
|
|
|
|
Group Button display buttons together sharing its configurations
|
|
|
|
## Import
|
|
|
|
```javascript
|
|
import { ButtonGroup } from '@ohif/ui';
|
|
```
|
|
|
|
## Basic button group
|
|
|
|
<Playground>
|
|
<div className="p-4 flex flex-col items-center">
|
|
<ButtonGroup color="primary" className="m-2">
|
|
<Button>One</Button>
|
|
<Button>Two</Button>
|
|
<Button>Tree</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup color="primary" variant="contained" className="m-2">
|
|
<Button>One</Button>
|
|
<Button>Two</Button>
|
|
<Button>Tree</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup color="primary" variant="text" className="m-2">
|
|
<Button>One</Button>
|
|
<Button>Two</Button>
|
|
<Button>Tree</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Group sizes and colorss
|
|
|
|
<Playground>
|
|
<div className="p-4 flex flex-col items-center">
|
|
<ButtonGroup color="default" size="small" className="m-2">
|
|
<Button>One</Button>
|
|
<Button>Two</Button>
|
|
<Button>Tree</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup color="primary" size="medium" className="m-2">
|
|
<Button>One</Button>
|
|
<Button>Two</Button>
|
|
<Button>Tree</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup color="secondary" size="large" className="m-2">
|
|
<Button>One</Button>
|
|
<Button>Two</Button>
|
|
<Button>Tree</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Group orientation
|
|
|
|
<Playground>
|
|
<div className="p-4 flex flex-row justify-center">
|
|
<ButtonGroup orientation="vertical" color="primary" className="m-2">
|
|
<Button>One</Button>
|
|
<Button>Two</Button>
|
|
<Button>Tree</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup
|
|
orientation="vertical"
|
|
color="primary"
|
|
variant="contained"
|
|
className="m-2"
|
|
>
|
|
<Button>One</Button>
|
|
<Button>Two</Button>
|
|
<Button>Tree</Button>
|
|
</ButtonGroup>
|
|
<ButtonGroup
|
|
orientation="vertical"
|
|
color="primary"
|
|
variant="text"
|
|
className="m-2"
|
|
>
|
|
<Button>One</Button>
|
|
<Button>Two</Button>
|
|
<Button>Tree</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Split Button
|
|
|
|
<Playground>
|
|
<div className="p-4 flex flex-col items-center">
|
|
<ButtonGroup color="primary" className="m-2">
|
|
<Button>Options</Button>
|
|
<IconButton className="mr-2">
|
|
<Icon name="settings" />
|
|
</IconButton>
|
|
</ButtonGroup>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Properties
|
|
|
|
<Props of={ButtonGroup} />
|