83 lines
1.8 KiB
Plaintext
83 lines
1.8 KiB
Plaintext
---
|
|
name: List Menu
|
|
menu: General
|
|
route: components/listMenu
|
|
---
|
|
|
|
import { useState } from 'react';
|
|
import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
|
|
|
|
import { ListMenu, ToolbarButton } from '@ohif/ui';
|
|
|
|
# List Menu
|
|
|
|
List Menus are used to populate expandable Toolbar.
|
|
|
|
## Import
|
|
|
|
```javascript
|
|
import { ListMenu, ToolbarButton } from '@ohif/ui';
|
|
```
|
|
|
|
```jsx live
|
|
function() {
|
|
return (
|
|
<ToolbarButton
|
|
items={[
|
|
{
|
|
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>
|
|
</>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Properties
|
|
|
|
<ComponentPropsTable componentName={'ListMenu'} />
|