121 lines
3.0 KiB
Plaintext
121 lines
3.0 KiB
Plaintext
|
---
|
||
|
|
name: ButtonGroup
|
||
|
|
menu: Components
|
||
|
|
route: components/buttonGroup
|
||
|
|
---
|
||
|
|
|
||
|
|
import { Playground, Props } from 'docz';
|
||
|
|
import Button from '../Button';
|
||
|
|
import IconButton from '../IconButton';
|
||
|
|
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>Search</Button>
|
||
|
|
<IconButton className="mr-2">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="24"
|
||
|
|
height="24"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z" />
|
||
|
|
</svg>
|
||
|
|
</IconButton>
|
||
|
|
</ButtonGroup>
|
||
|
|
</div>
|
||
|
|
</Playground>
|
||
|
|
|
||
|
|
## Properties
|
||
|
|
|
||
|
|
<Props of={ButtonGroup} />
|