Popover Svelte コンポーネント

Popoverコンポーネントは、ポップオーバーでのコンテンツの表示を管理するために使用されます。ポップオーバーを使用して、情報を一時的に表示します。ポップオーバーは、ユーザーがポップオーバーウィンドウの外側をタップするか、明示的に閉じない限り、表示されたままになります。

Popover Svelteコンポーネントは、Popoverコンポーネントを表します。

以下のコンポーネントが含まれています

ポップオーバー

プロパティ	タイプ	デフォルト	説明
<Popover> プロパティ
opened	boolean	false	Popoverを開閉し、初期状態を設定できます
arrow	boolean	true	Popoverの矢印/角を有効にします
targetEl	string object		Popoverターゲット要素のHTML要素または文字列CSSセレクター
verticalPosition	string	auto	ポップオーバーの垂直方向の位置を強制します。 `auto`、`top`、または`bottom`を指定できます。
backdrop	boolean	true	Popoverのバックドロップ（暗い半透明レイヤー）を有効にします。デフォルトでは、同じアプリパラメータ値（`true`）を継承します
backdropEl	string object		カスタムバックドロップ要素のHTML要素または文字列CSSセレクター
backdropUnique	boolean	false	有効にすると、このモーダル専用の固有のバックドロップ要素が作成されます
closeByBackdropClick	boolean	true	有効にすると、バックドロップをクリックするとポップオーバーが閉じます。デフォルトでは、同じアプリパラメータ値を継承します
closeByOutsideClick	boolean	true	有効にすると、外側をクリックするとポップオーバーが閉じます。デフォルトでは、同じアプリパラメータ値を継承します
closeOnEscape	boolean	false	有効にすると、ESCキーボードキーを押すとポップオーバーが閉じます
animate	boolean	true	モーダルをアニメーションで開閉するかどうか
containerEl	HTMLElement string		モーダルをマウントする要素（デフォルトはアプリのルート要素）

イベント	説明
<Popover> イベント
popoverOpen	Popoverが開くアニメーションを開始するときにトリガーされるイベント
popoverOpened	Popoverが開くアニメーションを完了した後にトリガーされるイベント
popoverClose	Popoverが閉じるアニメーションを開始するときにトリガーされるイベント
popoverClosed	Popoverが閉じるアニメーションを完了した後にトリガーされるイベント

Popoverの状態を制御し、開閉することができます

Popover APIを使用する
openedプロパティにtrueまたはfalseを渡す
関連する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インスタンスへのアクセス

例