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.

Popup Components

There are following components included:

• f7-popup - popup element

Popup Properties

Prop	Type	Description
<f7-popup> properties
tablet-fullscreen	boolean	Defines whether the popup should be displayed fullscreen on tablets or not
opened	boolean	Allows to open/close Popup and set its initial state

Popup Methods

<f7-popup> methods
.open(animate)	Open popup
.close(animate)	Close popup

Popup Events

Event	Description
<f7-popup> events
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 Popup API
• by passing true or false to its opened prop
• by clicking on Link or Button with relevant popup-open property (to open it) and popup-close property to close it

Access To Popup Instance

You can access Popup initialized instance by accessing .f7Popup component's property.

Examples

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