SPopover <s-popover>

Schwebender Inhalt, der am Button verankert ist, der ihn öffnet. SPopover ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-popover>.

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

Best Practices

• Für sekundäre Inhalte verwenden. Ein Popover bleibt verborgen, bis Händler es öffnen. Legen Sie daher weniger wichtige Informationen und Aktionen hinein, nichts, was sofort sichtbar sein muss.
• Zusammengehörige Aktionen gruppieren. Die Aktionen in einem Popover sollten zusammengehören.
• Über einen klar beschrifteten Button öffnen. Lösen Sie das Popover mit einem Standard- oder variant="tertiary"-SButton aus, dessen Label sagt, was sich darin befindet.

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-popover> (auf Englisch).

Beispiel

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	Typ	Beschreibung
blockSize	"auto" | "0"	Passt die Blockgröße an.
inlineSize	"auto" | "0"	Passt die Inline-Größe an.
maxBlockSize	"none" | "0"	Passt die maximale Blockgröße an.
maxInlineSize	"none" | "0"	Passt die maximale Inline-Größe an.
minBlockSize	"0"	Passt die minimale Blockgröße an.
minInlineSize	"0"	Passt die minimale Inline-Größe an.

Events

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

Auf diese Events lauschen Sie mit Listenern im Stil von @afterhide auf <SPopover>.

Slots

Slot	Beschreibung
default	Der Inhalt innerhalb des Popovers, das in einem Overlay relativ zu seinem auslösenden Element positioniert erscheint. Enthält typischerweise Menüs, Aktionslisten oder ergänzende Informationen.