Framework7 - Popover

Description

To manage the presentation of temporary content, popover component can be used. It will exist until you click outside of the popover window or you can dismiss it explicity.

It is suggested not to use popover on small screens (iPhone). You should use Action sheet or Action sheet to popover coversion which are discussed in next chapter.

The popover layout is very simple and is added usually at the end of the <body> section as shown below −

<body>
   ....
   <div class = "popover">
      <!-- Popover's angle arrow -->
      <div class="popover-angle"></div>

      <!-- Popover's content -->
      <div class = "popover-inner">
         <!-- Any content of HTML here -->
      </div>
   </div>
</body>

Popover is highly customizable. You can place any element inside and event another view with navigation. The following table shows the popover types used in Framework7 −

S.No Types & Description
1 Open and close Popover

Opening and closing the popover can be achieved by using HTML and JavaScript.
2 Dynamic Popover

The popover can be created dynamically by using related app methods.
3 Popover Events

To detect how the user interacts with the popover, you can use popover events.
framework7_overlays.htm
Advertisements