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
50 lines
2.0 KiB
Markdown
50 lines
2.0 KiB
Markdown
# UI Modal Service
|
|
|
|
Modals have similar characteristics to that of Dialogs, but are often larger,
|
|
and only allow for a single instance to be viewable at once. They also tend to
|
|
be centered, and not draggable. They're commonly used 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/549261451?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="Viewer 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 |
|
|
| ---------- | ------------------------------------- |
|
|
| `hide()` | Hides the open modal |
|
|
| `show()` | Shows the provided content in a modal |
|
|
|
|
## Implementations
|
|
|
|
| Implementation | Consumer |
|
|
| ---------------------------------- | --------- |
|
|
| [Modal Provider][modal-provider]\* | Modal.jsx |
|
|
|
|
`*` - Denotes maintained by OHIF
|
|
|
|
|
|
|
|
|
|
|
|
> 3rd Party implementers may be added to this table via pull requests.
|
|
|
|
<!--
|
|
LINKS
|
|
-->
|
|
|
|
<!-- prettier-ignore-start -->
|
|
[interface]: https://github.com/OHIF/Viewers/blob/master/platform/core/src/services/UIModalService/index.js
|
|
[modal-provider]: https://github.com/OHIF/Viewers/blob/master/platform/ui/src/contextProviders/ModalProvider.js
|
|
[modal-consumer]: https://github.com/OHIF/Viewers/tree/master/platform/ui/src/components/ohifModal
|
|
[ux-article]: https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
|
|
<!-- prettier-ignore-end -->
|