fun-modal-controller
Controls the position and dismissal of modal dialogs. This component has no opinions about the actual appearance of the dialog, but is designed to work together with the fun-modal component.
For a fully ‘modal’ dialog, where the user is forced to use one of the buttons in the modal to dismiss it,
set closeOnClickOutside and closeOnEscape to false. You can also set closeButton to false on the fun-modal component,
if you are using that.
See the Modal guidelines for usage of modals.
Examples
Specifications
Properties
| Property | Attribute | Required | Description | Type | Default |
|---|---|---|---|---|---|
| closeOnClickOutside | close-on-click-outside | false | Should the modal close when the user clicks outside it | boolean | true |
| closeOnEscape | close-on-escape | false | Should the modal close when the user presses ‘Escape’ | boolean | true |
| open | open | true | Is the modal open | boolean | |
| portal | portal | false | Experimental: If set, look for a dom element with this ID to render the modal inside. If not set or doesn’t exist, render inline. | string | |
| submitOnEnter | submit-on-enter | false | Should the modal be submitted when the user presses command+enter | boolean | true |
Events
| Name | Description |
|---|---|
funDismiss | Emitted when the modal is dismissed. |
funOpen | Emitted after the modal is opened. A good place to put code |
| to focus on something in the modal. | |
funSubmit | Emitted when the modal is submitted using command+enter. |
Dependencies
Depends on
This documentation page generated from the source at fun-modal-controller.tsx
