Popup is a popup window with any HTML content that pops up over App's main content. Popup as all other overlays is part of so called "Temporary Views".
Popup React component represents Popup component.
<!-- Popup -->
<Popup>
<!-- Popup content goes here -->
</Popup>
<!-- Popup which is also fullscreen on tablets -->
<Popup tabletFullscreen>
<!-- Popup content goes here -->
</Popup>
Renders to:
<!-- Popup -->
<div class="popup">
<!-- Popup content goes here -->
</div>
<!-- Popup which is also fullscreen on tablets -->
<div class="popup tablet-fullscreen">
<!-- Popup content goes here -->
</div>
Prop | Type | Description |
---|---|---|
theme | string | Popup theme color. One of default colors |
layout | string | Popup layout theme. One of default layout themes |
tabletFullscreen | boolean | Defines whether popup should be displayed fullscreen on tablets or not |
opened | boolean | Allows to open/close Popup and set its initial state |
Event | Description |
---|---|
onPopupOpen | Event will be triggered when Popup starts its opening animation |
onPopupOpened | Event will be triggered after Popup completes its opening animation |
onPopupClose | Event will be triggered when Popup starts its closing animation |
onPopupClosed | Event will be triggered after Popup completes its closing animation |
You can control Popup state, open and closing it:
opened
propopenPopup
property (to open it) and closePopup
property to close it