fixes for jsx live blocks
This commit is contained in:
Erik Ziegler
parent
09469e6ac5
commit
7a79e42929
@ -18,318 +18,247 @@ import { Button } from '@ohif/ui';
|
||||
|
||||
## Outlined Buttons
|
||||
|
||||
````jsx live
|
||||
<div className="p-4">
|
||||
<Button variant="outlined" className="m-1">
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="outlined" color="primary" className="m-1">
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="outlined" color="secondary" className="m-1">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant="outlined" color="white" className="m-1">
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<Button variant="outlined" className="m-1">
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="outlined" color="primary" className="m-1">
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="outlined" color="secondary" className="m-1">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant="outlined" color="white" className="m-1">
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Contained Buttons
|
||||
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<Button variant="contained" className="m-1">
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="contained" color="primary" className="m-1">
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" className="m-1">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant="contained" color="white" className="m-1">
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<Button variant="contained" className="m-1">
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="contained" color="primary" className="m-1">
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" className="m-1">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant="contained" color="white" className="m-1">
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Text Buttons
|
||||
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<Button variant="text" className="m-1">
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="text" color="primary" className="m-1">
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="text" color="secondary" className="m-1">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant="text" color="white" className="m-1">
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<Button variant="text" className="m-1">
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="text" color="primary" className="m-1">
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="text" color="secondary" className="m-1">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant="text" color="white" className="m-1">
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Rounded Buttons
|
||||
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<div className="mb-2">
|
||||
<Button variant="contained" rounded="none" className="m-1">
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="small" className="m-1">
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="medium" className="m-1">
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="large" className="m-1">
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="full" className="m-1">
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="none"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="small"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="medium"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="large"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="full"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="none"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="small"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="medium"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="large"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="full"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Button variant="contained" rounded="none" color="white" className="m-1">
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="small" color="white" className="m-1">
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="medium"
|
||||
color="white"
|
||||
className="m-1"
|
||||
>
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="large" color="white" className="m-1">
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="full" color="white" className="m-1">
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="mb-2">
|
||||
<Button variant="contained" rounded="none" className="m-1">
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="small" className="m-1">
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="medium" className="m-1">
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="large" className="m-1">
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="full" className="m-1">
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Button variant="contained" rounded="none" color="primary" className="m-1">
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="small" color="primary" className="m-1">
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="medium"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="large" color="primary" className="m-1">
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="full" color="primary" className="m-1">
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="none"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="small"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="medium"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="large"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="full"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Button variant="contained" rounded="none" color="white" className="m-1">
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="small" color="white" className="m-1">
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="medium" color="white" className="m-1">
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="large" color="white" className="m-1">
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="full" color="white" className="m-1">
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Sizes
|
||||
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<div>
|
||||
<Button variant="contained" size="small" className="m-1">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="contained" size="medium" className="m-1">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="contained" size="large" className="m-1">
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Small
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Medium
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Small
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Medium
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
color="white"
|
||||
className="m-1"
|
||||
>
|
||||
Small
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
color="white"
|
||||
className="m-1"
|
||||
>
|
||||
Medium
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
color="white"
|
||||
className="m-1"
|
||||
>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<div>
|
||||
<Button variant="contained" size="small" className="m-1">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="contained" size="medium" className="m-1">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="contained" size="large" className="m-1">
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="contained" size="small" color="primary" className="m-1">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="contained" size="medium" color="primary" className="m-1">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="contained" size="large" color="primary" className="m-1">
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="contained" size="small" color="secondary" className="m-1">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="contained" size="medium" color="secondary" className="m-1">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="contained" size="large" color="secondary" className="m-1">
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="contained" size="small" color="white" className="m-1">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="contained" size="medium" color="white" className="m-1">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="contained" size="large" color="white" className="m-1">
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Buttons with icons
|
||||
|
||||
```jsx live
|
||||
<div className="p-4 flex">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
startIcon={<Icon name="settings" />}
|
||||
>
|
||||
Settings
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
endIcon={<Icon name="settings" />}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
rounded="full"
|
||||
color="default"
|
||||
className="m-1"
|
||||
endIcon={<Icon name="settings" />}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-4 flex">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
startIcon={<Icon name="settings" />}
|
||||
>
|
||||
Settings
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
endIcon={<Icon name="settings" />}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
rounded="full"
|
||||
color="default"
|
||||
className="m-1"
|
||||
endIcon={<Icon name="settings" />}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Icon Buttons
|
||||
@ -338,104 +267,104 @@ Icon buttons are generally used in toolbars.
|
||||
|
||||
```javascript
|
||||
import { IconButton } from '@ohif/ui';
|
||||
````
|
||||
|
||||
````jsx live
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<div className="">
|
||||
<IconButton className="m-2">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="primary">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="text">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="outlined">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="secondary">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="text">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="outlined">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="white">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text" color="white">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined" color="white">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<div className="">
|
||||
<IconButton className="m-2">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="primary">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="text">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="outlined">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="secondary">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="text">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="outlined">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="white">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text" color="white">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined" color="white">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<div className="">
|
||||
<IconButton className="m-2">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="primary">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="text">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="outlined">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="secondary">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="text">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="outlined">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="white">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text" color="white">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined" color="white">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<div className="">
|
||||
<IconButton className="m-2">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="primary">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="text">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="outlined">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="secondary">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="text">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="outlined">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="white">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text" color="white">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined" color="white">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
@ -18,91 +18,91 @@ import { ButtonGroup } from '@ohif/ui';
|
||||
|
||||
## Basic button group
|
||||
|
||||
````jsx live
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="primary" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="primary" variant="contained" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="primary" variant="text" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
```jsx live
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="primary" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="primary" variant="contained" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="primary" variant="text" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Group sizes and colorss
|
||||
|
||||
```jsx live
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="default" size="small" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="primary" size="medium" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="secondary" size="large" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="default" size="small" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="primary" size="medium" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="secondary" size="large" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Group orientation
|
||||
|
||||
```jsx live
|
||||
<div className="p-4 flex flex-row justify-center">
|
||||
<ButtonGroup orientation="vertical" color="primary" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup
|
||||
orientation="vertical"
|
||||
color="primary"
|
||||
variant="contained"
|
||||
className="m-2"
|
||||
>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup
|
||||
orientation="vertical"
|
||||
color="primary"
|
||||
variant="text"
|
||||
className="m-2"
|
||||
>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<div className="p-4 flex flex-row justify-center">
|
||||
<ButtonGroup orientation="vertical" color="primary" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup
|
||||
orientation="vertical"
|
||||
color="primary"
|
||||
variant="contained"
|
||||
className="m-2"
|
||||
>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup
|
||||
orientation="vertical"
|
||||
color="primary"
|
||||
variant="text"
|
||||
className="m-2"
|
||||
>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Split Button
|
||||
|
||||
```jsx live
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="primary" className="m-2">
|
||||
<Button>Options</Button>
|
||||
<IconButton className="mr-2">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="primary" className="m-2">
|
||||
<Button>Options</Button>
|
||||
<IconButton className="mr-2">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
@ -21,24 +21,22 @@ import { DateRange } from '@ohif/ui';
|
||||
## Date Range
|
||||
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const [dates, setDates] = useState({
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
});
|
||||
return (
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<DateRange
|
||||
startDate={dates.startDate}
|
||||
endDate={dates.endDate}
|
||||
onChange={({ startDate, endDate }) =>
|
||||
setDates({ startDate, endDate })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
function() {
|
||||
const [dates, setDates] = useState({
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
});
|
||||
return (
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<DateRange
|
||||
startDate={dates.startDate}
|
||||
endDate={dates.endDate}
|
||||
onChange={({ startDate, endDate }) =>
|
||||
setDates({ startDate, endDate })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -18,10 +18,10 @@ import { ErrorBoundary } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
````jsx live
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<ErrorBoundary context="Somewhere">
|
||||
{() => {
|
||||
function() {
|
||||
throw new Error('Error!');
|
||||
return <p></p>;
|
||||
}}
|
||||
@ -32,7 +32,7 @@ import { ErrorBoundary } from '@ohif/ui';
|
||||
## Custom error fallback
|
||||
|
||||
```jsx live
|
||||
{() => {
|
||||
function() {
|
||||
const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => {
|
||||
return (
|
||||
<div>
|
||||
@ -43,7 +43,7 @@ import { ErrorBoundary } from '@ohif/ui';
|
||||
return (
|
||||
<div className="p-4">
|
||||
<ErrorBoundary context="Somewhere" fallbackComponent={CustomFallback}>
|
||||
{() => {
|
||||
function() {
|
||||
throw new Error('Error!');
|
||||
return <p></p>;
|
||||
}}
|
||||
|
||||
@ -18,39 +18,39 @@ import { MeasurementTable } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
````jsx live
|
||||
{() => {
|
||||
const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
|
||||
const measurementTableData = {
|
||||
title: 'Measurements',
|
||||
amount: 10,
|
||||
data: new Array(10).fill({}).map((el, i) => ({
|
||||
id: i + 1,
|
||||
label: 'Label short description',
|
||||
displayText: ['24.0 x 24.0 mm (S:4, I:22)'],
|
||||
isActive: activeMeasurementItem === i + 1,
|
||||
})),
|
||||
onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
|
||||
onEdit: id => alert(`Edit: ${id}`),
|
||||
};
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
<MeasurementTable {...measurementTableData} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
```jsx live
|
||||
function() {
|
||||
const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
|
||||
const measurementTableData = {
|
||||
title: 'Measurements',
|
||||
amount: 10,
|
||||
data: new Array(10).fill({}).map((el, i) => ({
|
||||
id: i + 1,
|
||||
label: 'Label short description',
|
||||
displayText: ['24.0 x 24.0 mm (S:4, I:22)'],
|
||||
isActive: activeMeasurementItem === i + 1,
|
||||
})),
|
||||
onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
|
||||
onEdit: id => alert(`Edit: ${id}`),
|
||||
};
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
<MeasurementTable {...measurementTableData} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Empty Data
|
||||
|
||||
```jsx live
|
||||
{() => {
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
<MeasurementTable title="Measurements" />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
function() {
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
<MeasurementTable title="Measurements" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
@ -16,37 +16,37 @@ import { Select } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
````jsx live
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
options={[
|
||||
{ value: 'ONE', label: 'ONE' },
|
||||
{ value: 'TWO', label: 'TWO' },
|
||||
{ value: 'THREE', label: 'THREE' },
|
||||
{ value: 'FOUR', label: 'FOUR' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
```jsx live
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
options={[
|
||||
{ value: 'ONE', label: 'ONE' },
|
||||
{ value: 'TWO', label: 'TWO' },
|
||||
{ value: 'THREE', label: 'THREE' },
|
||||
{ value: 'FOUR', label: 'FOUR' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Disabled
|
||||
|
||||
```jsx live
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
isDisabled
|
||||
options={[
|
||||
{ value: 'ONE', label: 'ONE' },
|
||||
{ value: 'TWO', label: 'TWO' },
|
||||
{ value: 'THREE', label: 'THREE' },
|
||||
{ value: 'FOUR', label: 'FOUR' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
isDisabled
|
||||
options={[
|
||||
{ value: 'ONE', label: 'ONE' },
|
||||
{ value: 'TWO', label: 'TWO' },
|
||||
{ value: 'THREE', label: 'THREE' },
|
||||
{ value: 'FOUR', label: 'FOUR' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## No Options
|
||||
@ -55,7 +55,7 @@ import { Select } from '@ohif/ui';
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
noOptionsMessage={() => {
|
||||
noOptionsMessage=function() {
|
||||
'No Options';
|
||||
}}
|
||||
options={[]}
|
||||
|
||||
@ -16,59 +16,69 @@ import { SidePanel } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
````jsx live
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: '500px' }}
|
||||
>
|
||||
<SidePanel
|
||||
side="left"
|
||||
childComponents={{
|
||||
iconName: "group-layers",
|
||||
iconLabel: "Studies",
|
||||
name: "studies",
|
||||
label: "Studies",
|
||||
content: <div className="flex justify-center text-white p-2">panel content</div>,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
|
||||
CONTENT
|
||||
</div>
|
||||
```jsx live
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: '500px' }}
|
||||
>
|
||||
<SidePanel
|
||||
side="left"
|
||||
childComponents={{
|
||||
iconName: 'group-layers',
|
||||
iconLabel: 'Studies',
|
||||
name: 'studies',
|
||||
label: 'Studies',
|
||||
content: (
|
||||
<div className="flex justify-center text-white p-2">panel content</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
|
||||
CONTENT
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
## Multiple panels
|
||||
|
||||
```jsx live
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: '500px' }}
|
||||
>
|
||||
<SidePanel
|
||||
side="left"
|
||||
childComponents={[{
|
||||
iconName: "group-layers",
|
||||
iconLabel: "Studies",
|
||||
name: "studies",
|
||||
label: "Studies",
|
||||
content: <div className="flex justify-center text-white p-2">studies panel content</div>,
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: '500px' }}
|
||||
>
|
||||
<SidePanel
|
||||
side="left"
|
||||
childComponents={[
|
||||
{
|
||||
iconName: 'group-layers',
|
||||
iconLabel: 'Studies',
|
||||
name: 'studies',
|
||||
label: 'Studies',
|
||||
content: (
|
||||
<div className="flex justify-center text-white p-2">
|
||||
studies panel content
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
iconName: "list-bullets",
|
||||
iconLabel: "Measure",
|
||||
name: "measurements",
|
||||
label: "Measurements",
|
||||
content: <div className="flex justify-center text-white p-2">measure panel content</div>,
|
||||
}]}
|
||||
/>
|
||||
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
|
||||
CONTENT
|
||||
</div>
|
||||
iconName: 'list-bullets',
|
||||
iconLabel: 'Measure',
|
||||
name: 'measurements',
|
||||
label: 'Measurements',
|
||||
content: (
|
||||
<div className="flex justify-center text-white p-2">
|
||||
measure panel content
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
|
||||
CONTENT
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={SidePanel} />
|
||||
|
||||
@ -4,7 +4,7 @@ menu: General
|
||||
route: components/toolbarButton
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useCallback } from 'react';
|
||||
|
||||
import { ToolbarButton } from '@ohif/ui';
|
||||
|
||||
@ -19,17 +19,18 @@ import { ToolbarButton } from '@ohif/ui';
|
||||
```
|
||||
|
||||
```jsx live
|
||||
function ToolbarButtonExample(props) {
|
||||
// const [isActive, setIsActive] = useState(false);
|
||||
function() {
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
|
||||
const tool = {
|
||||
id: 'Zoom',
|
||||
label: 'Zoom',
|
||||
icon: 'tool-zoom',
|
||||
type: null,
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Zoom' },
|
||||
//onClick: () => setIsActive(true),
|
||||
isActive: true,
|
||||
/*commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Zoom' },*/
|
||||
onInteraction: () => setIsActive(!isActive),
|
||||
isActive,
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -19,33 +19,33 @@ import { Typography } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
````jsx live
|
||||
<div className="p-4">
|
||||
<Typography variant="h1">
|
||||
h1. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h2">
|
||||
h2. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h3">
|
||||
h3. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h4">
|
||||
h4. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h5">
|
||||
h5. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
h6. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="subtitle">
|
||||
subtitle. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="body">
|
||||
body. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
</div>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<Typography variant="h1">
|
||||
h1. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h2">
|
||||
h2. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h3">
|
||||
h3. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h4">
|
||||
h4. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h5">
|
||||
h5. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
h6. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="subtitle">
|
||||
subtitle. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="body">
|
||||
body. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Changing the HTML element
|
||||
@ -56,11 +56,11 @@ a semantic element. The style of a Typography is independent of the semantic
|
||||
element.
|
||||
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<Typography variant="h1" component="h2">
|
||||
This is a h2 using the h1 styles.
|
||||
</Typography>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<Typography variant="h1" component="h2">
|
||||
This is a h2 using the h1 styles.
|
||||
</Typography>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
@ -18,117 +18,117 @@ import { ViewportActionBar } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
````jsx live
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: true,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'CT',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
```jsx live
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: true,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'CT',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
```jsx live
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: true,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'CT',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: true,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'CT',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
```jsx live
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'SR',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'SR',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
```jsx live
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: true,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'SR',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: true,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'SR',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
</>
|
||||
|
||||
## Properties
|
||||
|
||||
|
||||
@ -22,8 +22,8 @@ component across all application.
|
||||
|
||||
## Sample
|
||||
|
||||
````jsx live
|
||||
{() => {
|
||||
```jsx live
|
||||
function() {
|
||||
const ViewportNotification = ({ hide }) => {
|
||||
return (
|
||||
<Notification
|
||||
@ -88,7 +88,7 @@ component across all application.
|
||||
## Example using UIViewportDialogService
|
||||
|
||||
```jsx live
|
||||
{() => {
|
||||
function() {
|
||||
const ViewportNotification = ({ hide }) => {
|
||||
return (
|
||||
<Notification
|
||||
|
||||
@ -28,14 +28,14 @@ details about color classes.
|
||||
|
||||
## Text
|
||||
|
||||
````jsx live
|
||||
<div className="p-8">
|
||||
<p className="text-common-bright">text-common-bright</p>
|
||||
<p className="text-common-light">text-common-light</p>
|
||||
<p className="text-common-main">text-common-main</p>
|
||||
<p className="text-common-dark">text-common-dark</p>
|
||||
<p className="text-common-active">text-common-active</p>
|
||||
</div>
|
||||
```jsx live
|
||||
<div className="p-8">
|
||||
<p className="text-common-bright">text-common-bright</p>
|
||||
<p className="text-common-light">text-common-light</p>
|
||||
<p className="text-common-main">text-common-main</p>
|
||||
<p className="text-common-dark">text-common-dark</p>
|
||||
<p className="text-common-active">text-common-active</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Background
|
||||
@ -79,4 +79,4 @@ common: {
|
||||
dark: '#726f7e',
|
||||
active: '#2c3074',
|
||||
},
|
||||
````
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user