-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
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) andclosePopup
property to close it