a7f1f4daa7
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
ion-modal
A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases.
Creating
Modals can be created using a Modal Controller. They can be customized by passing modal options in the modal controller's create method.
Properties
component
string
The component to display inside of the modal.
componentProps
ComponentProps
The data to pass to the modal component.
cssClass
string
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
delegate
FrameworkDelegate
enableBackdropDismiss
boolean
If true, the modal will be dismissed when the backdrop is clicked. Defaults to true.
enterAnimation
AnimationBuilder
Animation to use when the modal is presented.
keyboardClose
boolean
leaveAnimation
AnimationBuilder
Animation to use when the modal is dismissed.
overlayId
number
showBackdrop
boolean
If true, a backdrop will be displayed behind the modal. Defaults to true.
willAnimate
boolean
If true, the modal will animate. Defaults to true.
Attributes
component
string
The component to display inside of the modal.
component-props
The data to pass to the modal component.
css-class
string
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
delegate
enable-backdrop-dismiss
boolean
If true, the modal will be dismissed when the backdrop is clicked. Defaults to true.
enter-animation
Animation to use when the modal is presented.
keyboard-close
boolean
leave-animation
Animation to use when the modal is dismissed.
overlay-id
number
show-backdrop
boolean
If true, a backdrop will be displayed behind the modal. Defaults to true.
will-animate
boolean
If true, the modal will animate. Defaults to true.
Events
ionModalDidDismiss
Emitted after the modal has dismissed.
ionModalDidLoad
Emitted after the modal has loaded.
ionModalDidPresent
Emitted after the modal has presented.
ionModalDidUnload
Emitted after the modal has unloaded.
ionModalWillDismiss
Emitted before the modal has dismissed.
ionModalWillPresent
Emitted before the modal has presented.
Methods
dismiss()
Dismiss the modal overlay after it has been presented.
onDidDismiss()
Returns a promise that resolves when the modal did dismiss. It also accepts a callback that is called in the same circustances.
onWillDismiss()
Returns a promise that resolves when the modal will dismiss. It also accepts a callback that is called in the same circustances.
present()
Present the modal overlay after it has been created.
Built with StencilJS