TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip on switching from docz to docusaurus

Browse Source
This commit is contained in:
Erik Ziegler committed 2021-07-13 23:48:16 +02:00
1 parent 69e36106e3
commit 09469e6ac5
97 files changed
+1505 -7132
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui/src/components/ButtonGroup/ButtonGroup.mdx
-111
View File
@@ -1,111 +0,0 @@
---
name: ButtonGroup
menu: General
route: components/buttonGroup
---
import { Playground, Props } from 'docz';
import { ButtonGroup, Button, IconButton, Icon } from '../';
# 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} />