Popover Svelte Component

Popover component 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 Svelte component represents Popover component.

There are following components included:

Popover

Prop	Type	Default	Description
<Popover> properties
opened	boolean	false	Allows to open/close Popover and set its initial state
arrow	boolean	true	Enables Popover arrow/corner
targetEl	string object		HTML element or string CSS selector of Popover target element
verticalPosition	string	auto	Force popover vertical position, can be `auto`, `top` or `bottom`
backdrop	boolean	true	Enables Popover backdrop (dark semi transparent layer behind). By default inherits same app parameter value (`true`)
backdropEl	string object		HTML element or string CSS selector of custom backdrop element
backdropUnique	boolean	false	If enabled it creates unique backdrop element exclusively for this modal
closeByBackdropClick	boolean	true	When enabled, popover will be closed on backdrop click. By default inherits same app parameter value
closeByOutsideClick	boolean	true	When enabled, popover will be closed on when click outside of it. By default inherits same app parameter value
closeOnEscape	boolean	false	When enabled, popover will be closed on ESC keyboard key press
animate	boolean	true	Whether the modal should be opened/closed with animation or not
containerEl	HTMLElement string		Element to mount modal to (default to app root element)

Event	Description
<Popover> events
popoverOpen	Event will be triggered when Popover starts its opening animation
popoverOpened	Event will be triggered after Popover completes its opening animation
popoverClose	Event will be triggered when Popover starts its closing animation
popoverClosed	Event will be triggered after Popover completes its closing animation

You can control Popover state, open and closing it:

using Popover API
by passing true or false to its opened prop
by clicking on Link or Button with relevant popoverOpen property (to open it) and popoverClose property to close it

You can access Popover initialized instance by calling .instance() component's method. For example:

<Popover bind:this={component}>...</Popover>

<script>
  let component;

  // to get instance in some method
  component.instance()
</script>

Examples

popover.svelte

<script>
  import {
    Navbar,
    Page,
    Toolbar,
    Popover,
    List,
    ListItem,
    Block,
    Link,
    Button,
  } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Popover" />
  <Toolbar bottom>
    <Link>Dummy Link</Link>
    <Link popoverOpen=".popover-menu">Open Popover</Link>
  </Toolbar>

  <Block>
    <p>
      <Button fill popoverOpen=".popover-menu">Open popover on me</Button>
    </p>
    <p>
      Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod
      mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis
      rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere
      dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus
      volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a odio
      facilisis, elementum tellus non,
      <Link popoverOpen=".popover-menu">popover</Link>
      tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae ipsum. Cras
      vehicula bibendum lorem quis imperdiet.
    </p>
    <p>
      In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum
      dolor, ac porta magna magna lacinia nunc. Curabitur
      <Link popoverOpen=".popover-menu">popover!</Link>
      cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla
      id sem suscipit volutpat. Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci,
      bibendum sed ligula non, ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent
      varius at nisl eu luctus. Cras aliquet porta est. Quisque elementum quis dui et consectetur.
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed
      laoreet purus. Pellentesque eget ante ante.
    </p>
    <p>
      Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit
      amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum
      in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis
      viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper
      <Link popoverOpen=".popover-menu">one more popover</Link>
      massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo.
      Vestibulum nec interdum nisi. Aenean ac consectetur velit, non malesuada magna. Sed pharetra
      vehicula augue, vel venenatis lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu
      in, interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus sed risus aliquet,
      vel accumsan dolor feugiat.
    </p>
  </Block>
  <Popover class="popover-menu">
    <List>
      <ListItem link="/dialog/" popoverClose title="Dialog" />
      <ListItem link="/tabs/" popoverClose title="Tabs" />
      <ListItem link="/panel/" popoverClose title="Side Panels" />
      <ListItem link="/list/" popoverClose title="List View" />
      <ListItem link="/inputs/" popoverClose title="Form Inputs" />
    </List>
  </Popover>
</Page>

Improve this Doc

On this page

Popover Components
Popover Properties
Popover Events
Open And Close Popover
Access To Popover Instance
Examples

Popover Svelte Component

Popover Components

Popover Properties

Popover Events

Open And Close Popover

Access To Popover Instance

Examples