create dropdown documentation
This commit is contained in:
parent
eeeaa8d1da
commit
d220dd2489
@ -5,11 +5,13 @@ route: components/dropdown
|
|||||||
---
|
---
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
import { Playground, Props } from 'docz';
|
||||||
import { Dropdown } from '@ohif/ui';
|
import { Dropdown, IconButton, Icon } from '@ohif/ui';
|
||||||
|
|
||||||
# Dropdown
|
# 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
|
## Import
|
||||||
|
|
||||||
@ -17,6 +19,50 @@ import { Dropdown } from '@ohif/ui';
|
|||||||
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
|
## Properties
|
||||||
|
|
||||||
<Props of={Button} />
|
<Props of={Dropdown} />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user