59 lines
1.7 KiB
Plaintext
59 lines
1.7 KiB
Plaintext
---
|
|
name: Expandable Toolbar Button
|
|
menu: General
|
|
route: components/expandableToolbarButton
|
|
---
|
|
|
|
import { useState } from 'react';
|
|
import { Playground, Props } from 'docz';
|
|
import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
|
|
|
|
# Toolbar Button
|
|
|
|
Expandable Toolbar Buttons are used to populate the Toolbar.
|
|
|
|
## Import
|
|
|
|
```javascript
|
|
import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
|
|
```
|
|
|
|
<Playground>
|
|
{() => {
|
|
const props = {
|
|
content: ListMenu,
|
|
contentProps: {
|
|
options: [
|
|
{ value: 'windowLevelPreset1', title: 'Soft tissue', subtitle: '400 / 40' },
|
|
{ value: 'windowLevelPreset2', title: 'Lung', subtitle: '1500 / -600' },
|
|
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
|
|
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
|
|
{ value: 'windowLevelPreset5', title: 'Brain', subtitle: '2500 / 480' },
|
|
],
|
|
renderer: ({ title, subtitle, isActive, index }) => (
|
|
<>
|
|
<div>
|
|
<span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
|
|
{title}
|
|
</span>
|
|
<span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
|
|
{subtitle}
|
|
</span>
|
|
</div>
|
|
<span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
|
|
</>
|
|
)
|
|
}
|
|
};
|
|
return (
|
|
<div className="py-10 flex justify-center">
|
|
<ExpandableToolbarButton {...props} />
|
|
</div>
|
|
);
|
|
}}
|
|
</Playground>
|
|
|
|
## Properties
|
|
|
|
<Props of={ToolbarButton} />
|