SPopover <s-popover>

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

Example

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	Type	Description
blockSize	"auto" | "0"	Adjust the block size.
inlineSize	"auto" | "0"	Adjust the inline size.
maxBlockSize	"none" | "0"	Adjust the maximum block size.
maxInlineSize	"none" | "0"	Adjust the maximum inline size.
minBlockSize	"0"	Adjust the minimum block size.
minInlineSize	"0"	Adjust the minimum inline size.

Events

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

Listen for these with @afterhide-style listeners on <SPopover>.

Slots

Slot	Description
default	The content displayed within the popover, which appears in an overlay positioned relative to its trigger element. Typically contains menus, action lists, or supplementary information.