Popup Vue 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 Vue component represents Popup component.

Usage example

<!-- Popup -->
<f7-popup>
  <!-- Popup content goes here -->
</f7-popup>

<!-- Popup which is also fullscreen on tablets -->
<f7-popup tablet-fullscreen>
  <!-- Popup content goes here -->
</f7-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
tablet-fullscreen	boolean	Defines whether popup should be displayed fullscreen on tablets or not
opened	boolean	Allows to open/close Popup and set its initial state

Methods

.open(animated)	Open popup
.close(animated)	Close popup

Events

Event	Description
popup:open	Event will be triggered when Popup starts its opening animation
popup:opened	Event will be triggered after Popup completes its opening animation
popup:close	Event will be triggered when Popup starts its closing animation
popup:closed	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 open-popup property (to open it) and close-popup property to close it