SPopover <s-popover>

Un contenu flottant ancré au bouton qui l'ouvre. SPopover est le wrapper Vue 3 typé du web component <s-popover> de Shopify Polaris.

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

Bonnes pratiques

• Réservez-le au contenu secondaire. Un popover reste masqué tant que les marchands ne l'ouvrent pas : placez-y des informations et actions moins importantes, rien de ce qu'ils doivent voir immédiatement.
• Regroupez les actions liées. Les actions d'un popover doivent aller ensemble.
• Ouvrez-le depuis un bouton au libellé clair. Déclenchez le popover avec un SButton par défaut ou variant="tertiary" dont le libellé indique ce qu'il contient.

Consultez les bonnes pratiques de Shopify pour <s-popover> (en anglais) pour l'ensemble des recommandations.

Exemple

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"	Ajuste la taille dans l'axe block.
inlineSize	"auto" | "0"	Ajuste la taille dans l'axe inline.
maxBlockSize	"none" | "0"	Ajuste la taille maximale dans l'axe block.
maxInlineSize	"none" | "0"	Ajuste la taille maximale dans l'axe inline.
minBlockSize	"0"	Ajuste la taille minimale dans l'axe block.
minInlineSize	"0"	Ajuste la taille minimale dans l'axe inline.

Events

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

Écoutez-les avec des listeners de la forme @afterhide sur <SPopover>.

Slots

Slot	Description
default	Le contenu affiché dans le popover, qui apparaît dans une surcouche positionnée par rapport à son élément déclencheur. Contient généralement des menus, des listes d'actions ou des informations complémentaires.