Language: ENCN

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