-
入门教程
-
Vue 组件
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.
Usage example
<!-- Popover -->
<f7-popover>
<!-- Popover content goes here -->
</f7-popover>
Renders to:
<!-- Popover -->
<div class="popover">
<div class="popover-angle"></div>
<div class="popover-content">
<!-- Popover content goes here -->
</div>
</div>
Properties
Popover component has no any properties
Methods
.open(target, animated) | Open popover around target element |
.close(animated) | Close popover |
Events
Event | Description |
---|---|
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 its JavaScript API
- by clicking on Link or Button with relevant
open-popover
property (to open it) andclose-popover
property to close it