Popover Svelte 组件

Popover 组件用于管理弹出框中的内容呈现。您可以使用弹出框暂时显示信息。弹出框将保持可见，直到用户点击弹出框窗口外部，或者您显式地将其关闭。

Popover Svelte 组件表示 Popover 组件。

以下组件包含：

弹出框

属性	类型	默认	描述
<Popover> 属性
opened	布尔值	false	允许打开/关闭 Popover 并设置其初始状态
arrow	布尔值	true	启用 Popover 箭头/角
targetEl	字符串对象		Popover 目标元素的 HTML 元素或字符串 CSS 选择器
verticalPosition	字符串	auto	强制弹出框垂直位置，可以是 `auto`、`top` 或 `bottom`
backdrop	布尔值	true	启用 Popover 背景（弹出框后面半透明的暗层）。默认情况下继承相同的应用参数值（`true`）
backdropEl	字符串对象		HTML 元素或字符串 CSS 选择器，用于自定义背景元素
backdropUnique	布尔值	false	如果启用，它将为此模态创建唯一的背景元素
closeByBackdropClick	布尔值	true	启用后，点击背景将关闭弹出框。默认情况下继承相同的应用参数值
closeByOutsideClick	布尔值	true	启用后，点击弹出框外部将关闭弹出框。默认情况下继承相同的应用参数值
closeOnEscape	布尔值	false	启用后，按下 ESC 键盘键将关闭弹出框
animate	布尔值	true	模态是否应使用动画打开/关闭
containerEl	HTMLElement 字符串		将模态挂载到的元素（默认情况下为应用根元素）

事件	描述
<Popover> 事件
popoverOpen	Popover 开始其打开动画时将触发此事件
popoverOpened	Popover 完成其打开动画后将触发此事件
popoverClose	Popover 开始其关闭动画时将触发此事件
popoverClosed	Popover 完成其关闭动画后将触发此事件

您可以控制 Popover 状态，打开和关闭它

使用 Popover API
通过将 true 或 false 传递给其 opened 属性
通过点击具有相关 popoverOpen 属性（打开它）和 popoverClose 属性（关闭它）的链接或按钮

您可以通过调用 .instance() 组件的方法来访问已初始化的 Popover 实例。例如

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

<script>
  let component;

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

示例

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>

改进此文档

在本页上

Popover 组件
Popover 属性
Popover 事件
打开和关闭 Popover
访问 Popover 实例
示例

Popover Svelte 组件

Popover 组件

Popover 属性

Popover 事件

打开和关闭 Popover

访问 Popover 实例

示例