f4aea45e01
* New icons and old strucure of OHIF ui v1 * Export icon * Removing wrong import and fixing some exports * Fixing svg loader and svg images to fullCurrent * Small fixes on docz * Remove repeated icon * Update other components to use Icon * Update platform/ui/src/components/Icon/icon.mdx Co-Authored-By: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com> * Fixing callouts * Move icons to assets and fixing layout on iconButtons * Fix path of icons Co-authored-by: Danny Brown <danny.ri.brown@gmail.com> Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
115 lines
2.6 KiB
Plaintext
115 lines
2.6 KiB
Plaintext
---
|
|
name: ButtonGroup
|
|
menu: Components
|
|
route: components/buttonGroup
|
|
---
|
|
|
|
import { Playground, Props } from 'docz';
|
|
import Button from '../Button';
|
|
import IconButton from './../IconButton';
|
|
import Icon from './../Icon';
|
|
import ButtonGroup from './';
|
|
|
|
# ButtonGroup
|
|
|
|
Group Button display buttons together sharing its configurations
|
|
|
|
## Import
|
|
|
|
```javascript
|
|
import { ButtonGroup } from '@ohfi/ui';
|
|
```
|
|
|
|
## Basic button group
|
|
|
|
<Playground>
|
|
<div className="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="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="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="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} />
|