-
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
Popover Vue Component
Popover compontent is used to manage the presentation of content in a popover. You use popovers to present information temporarily. The popover remains visible until the user taps outside of the popover window or you explicitly dismiss it.
Popover Vue component represents Popover component.
Popover Components
There are following components included:
f7-popover
Popover Properties
Prop | Type | Description |
---|---|---|
<f7-popover> properties | ||
opened | boolean | Allows to open/close Popover and set its initial state |
target | string object |
HTML element or string CSS selector of Popover target element |
Popover Methods
<f7-popover> methods | |
---|---|
.open(target, animate) | Open popover around target element |
.close(animate) | Close popover |
Popover Events
Event | Description |
---|---|
<f7-popover> events | |
popover:open | Event will be triggered when Popover starts its opening animation |
popover:opened | Event will be triggered after Popover completes its opening animation |
popover:close | Event will be triggered when Popover starts its closing animation |
popover:closed | Event will be triggered after Popover completes its closing animation |
Open And Close Popover
You can control Popover state, open and closing it:
- using Popover API
- by passing
true
orfalse
to itsopened
prop - by clicking on Link or Button with relevant
popover-open
property (to open it) andpopover-close
property to close it
Access To Popover Instance
You can access Popover initialized instance by accessing .f7Popover
component's property.
Examples
<!-- Popover -->
<f7-popover>
<!-- Popover content goes here -->
</f7-popover>
Renders to:
<!-- Popover -->
<div class="popover">
<div class="popover-angle"></div>
<div class="popover-inner">
<!-- Popover content goes here -->
</div>
</div>