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 { 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} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user