Language: ENCN

Popup React Component

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.

Usage example

<!-- 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>

Properties

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 Properties

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

Open and close Popup

You can control Popup state, open and closing it:

  • using its JavaScript API
  • by passing true or false to its opened prop
  • by clicking on Link or Button with relevant openPopup property (to open it) and closePopup property to close it