Modalwindow Complex component
Place a modal window on the interface with using this component. In a modal window, users are allowed to perform operations only within that window. The modal window can be parameterized, whether the window will be closed when the ESC button is pressed.
In the window there are 3 areas: the header, the content, and the footer. These can all have components added to them, and they will be displayed in their respective areas.
Supported events:
Show, Hide, Animation, MouseEvents, Scroll, Hotkey
Style customization
Name |
Default value |
Derived value |
Computed value |
Comment |
|---|---|---|---|---|
| $modal-title-text-align | center | center | ||
| $modal-body-bg | $body-bg | $modal-body-bg-->$body-bg-->#fff | #fff | |
| $modal-header-bg | $light | $modal-header-bg-->$light-->mix(#f8f9fa, #e9ecef, 50%) | mix(#f8f9fa, #e9ecef, 50%) | |
| $modal-footer-bg | $light | $modal-footer-bg-->$light-->mix(#f8f9fa, #e9ecef, 50%) | mix(#f8f9fa, #e9ecef, 50%) | |
| $modal-shadow | $floating-shadow | $modal-shadow-->$floating-shadow-->0 0 1.875rem rgba($black, 0.1)-->0 0 1.875rem rgba(#000, 0.1) | #000 |