create dropdown documentation

This commit is contained in:
Rodrigo Antinarelli 2020-06-26 12:34:10 -03:00
parent eeeaa8d1da
commit d220dd2489

View File

@ -5,11 +5,13 @@ route: components/dropdown
---
import { Playground, Props } from 'docz';
import { Dropdown } from '@ohif/ui';
import { Dropdown, IconButton, Icon } from '@ohif/ui';
# Dropdown
...
This component is used when there are more than a few options to choose from. By
hovering or clicking on the trigger, a dropdown menu will appear, which allows
you to choose an option and execute the relevant action.
## Import
@ -17,6 +19,50 @@ import { Dropdown } from '@ohif/ui';
import { Dropdown } from '@ohif/ui';
```
<Playground>
{() => {
const handleClick = () => {
alert("Clicked");
}
return (
<div className="py-4">
<Dropdown
showDropdownIcon={false}
list={[
{
title: 'Option 1',
icon: 'info',
onClick: handleClick,
},
{
title: 'Option 2',
icon: 'settings',
onClick: handleClick,
},
]}
>
<IconButton
variant="text"
color="inherit"
size="initial"
className="text-primary-active"
>
<Icon name="settings" />
</IconButton>
<IconButton
variant="text"
color="inherit"
size="initial"
className="text-primary-active"
>
<Icon name="chevron-down" />
</IconButton>
</Dropdown>
</div>
);
}}
</Playground>
## Properties
<Props of={Button} />
<Props of={Dropdown} />