SPopover <s-popover>

開くためのボタンに固定して表示されるフローティングコンテンツ。 SPopover は、Shopify Polaris の <s-popover> web component 向けの型付き Vue 3 wrapper です。

import { SPopover } from 'polaris-vue-elements'

ベストプラクティス

• 二次的なコンテンツに使う。 ポップオーバーはマーチャントが開くまで隠れているため、すぐに見る必要があるものではなく、重要度の低い情報やアクションを置きます。
• 関連するアクションをまとめる。 ポップオーバー内のアクションは、互いに関連するものにします。
• わかりやすいラベルのボタンから開く。 中身を示すラベルを付けた、デフォルトまたは variant="tertiary" の SButton でポップオーバーを開きます。

詳しいガイダンスについては、<s-popover> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Toggle popoverPopover content, opened via commandFor/command on the button above.

<script setup>
import { SButton, SPopover, SText } from 'polaris-vue-elements'
</script>

<template>
  <!-- Same declarative pattern as SModal: a trigger button's commandFor points
       at the popover's id, command controls the action ("--toggle" here). -->
  <SButton commandFor="example-popover" command="--toggle">Toggle popover</SButton>

  <SPopover id="example-popover">
    <SText>Popover content, opened via commandFor/command on the button above.</SText>
  </SPopover>
</template>

Props

Prop	型	説明
blockSize	"auto" | "0"	ブロックサイズを調整します。
inlineSize	"auto" | "0"	インラインサイズを調整します。
maxBlockSize	"none" | "0"	最大ブロックサイズを調整します。
maxInlineSize	"none" | "0"	最大インラインサイズを調整します。
minBlockSize	"0"	最小ブロックサイズを調整します。
minInlineSize	"0"	最小インラインサイズを調整します。

Events

Event	型
afterhide	CustomEvent
aftershow	CustomEvent
aftertoggle	Event
hide	CustomEvent
show	CustomEvent
toggle	Event

これらのイベントは <SPopover> 上で @afterhide 形式のリスナーで受け取れます。

Slots

Slot	説明
default	ポップオーバー内に表示されるコンテンツです。ポップオーバーはトリガー要素を基準に配置されるオーバーレイとして表示されます。通常、メニュー、アクションリスト、補足情報などを含みます。