5643f8f6d2
* Added docs with new screenshots * Added doc to architecture * Added documentations to various extension modules * Added more documentation to modes * Added docs to managers * Added docs for services * Fixed deployment docs * Added white labelling documentation * Added i18n docs and measurement export
60 lines
2.0 KiB
Markdown
60 lines
2.0 KiB
Markdown
# UI Viewport Dialog Service
|
|
|
|
## Overview
|
|
This is a new UI service, that creates a modal inside the viewport.
|
|
|
|
Dialogs have similar characteristics to that of Modals, but often with a
|
|
streamlined focus. They can be helpful when:
|
|
|
|
- We need to grab the user's attention
|
|
- We need user input
|
|
- We need to show additional information
|
|
|
|
If you're curious about the DOs and DON'Ts of dialogs and modals, check out this
|
|
article: ["Best Practices for Modals / Overlays / Dialog Windows"][ux-article]
|
|
|
|
|
|
|
|
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/549261939?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Viewport Modal"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
|
|
|
|
|
|
## Interface
|
|
|
|
For a more detailed look on the options and return values each of these methods
|
|
is expected to support, [check out it's interface in `@ohif/core`][interface]
|
|
|
|
| API Member | Description |
|
|
| -------------- | ------------------------------------------------------ |
|
|
| `create()` | Creates a new Dialog that is displayed until dismissed |
|
|
| `dismiss()` | Dismisses the specified dialog |
|
|
| `dismissAll()` | Dismisses all dialogs |
|
|
|
|
## Implementations
|
|
|
|
| Implementation | Consumer |
|
|
| ------------------------ | -------------------------- |
|
|
| [ViewportDialogProvider] | Baked into Dialog Provider |
|
|
|
|
`*` - Denotes maintained by OHIF
|
|
|
|
|
|
## State
|
|
|
|
```js
|
|
const DEFAULT_STATE = {
|
|
viewportIndex: null,
|
|
message: undefined,
|
|
type: 'info', // "error" | "warning" | "info" | "success"
|
|
actions: undefined, // array of { type, text, value }
|
|
onSubmit: () => {
|
|
console.log('btn value?');
|
|
},
|
|
onOutsideClick: () => {
|
|
console.warn('default: onOutsideClick')
|
|
},
|
|
onDismiss: () => {
|
|
console.log('dismiss? -1');
|
|
},
|
|
};
|
|
```
|