Popover Svelte 組件

Popover 組件用於管理彈出視窗中內容的呈現。您可以使用彈出視窗暫時呈現資訊。彈出視窗會一直顯示，直到使用者點選彈出視窗視窗外，或您明確將其關閉。

Popover Svelte 組件表示 Popover 組件。

包含下列組件

彈出視窗

屬性	類型	預設值	說明
<Popover> 屬性
opened	布林值	false	允許開啟/關閉 Popover 並設定其初始狀態
arrow	布林值	true	啟用 Popover 箭頭/角
targetEl	字串物件		Popover 目標元素的 HTML 元素或字串 CSS 選擇器
verticalPosition	字串	auto	強制 Popover 垂直位置，可以是 `auto`、`top` 或 `bottom`
backdrop	布林值	true	啟用 Popover 背景（後面的深色半透明圖層）。預設繼承相同的應用程式參數值（`true`）
backdropEl	字串物件		自訂背景元素的 HTML 元素或字串 CSS 選擇器
backdropUnique	布林值	false	如果啟用，它會為這個模式建立獨特的背景元素
closeByBackdropClick	布林值	true	啟用時，點擊背景會關閉 popover。預設繼承相同的應用程式參數值
closeByOutsideClick	布林值	true	啟用時，點擊 popover 外部會關閉 popover。預設繼承相同的應用程式參數值
closeOnEscape	布林值	false	啟用時，按下 ESC 鍵盤按鍵會關閉 popover
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 實例

範例