-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
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
orfalse
to itsopened
prop - by clicking on Link or Button with relevant
popup-open
property (to open it) andpopup-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>