SPopover <s-popover>

Contenido flotante anclado al botón que lo abre. SPopover es el wrapper de Vue 3 tipado del web component <s-popover> de Shopify Polaris.

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

Buenas prácticas

• Resérvalo para contenido secundario. Un popover permanece oculto hasta que los comerciantes lo abren, así que coloca en él información y acciones menos importantes, nada que necesiten ver de inmediato.
• Agrupa las acciones relacionadas. Las acciones dentro de un popover deben estar relacionadas entre sí.
• Ábrelo desde un botón con una etiqueta clara. Activa el popover con un SButton predeterminado o con variant="tertiary" cuya etiqueta indique qué contiene.

Consulta las buenas prácticas de Shopify para <s-popover> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Tipo	Descripción
blockSize	"auto" | "0"	Ajusta el tamaño en el eje de bloque.
inlineSize	"auto" | "0"	Ajusta el tamaño en el eje en línea.
maxBlockSize	"none" | "0"	Ajusta el tamaño máximo en el eje de bloque.
maxInlineSize	"none" | "0"	Ajusta el tamaño máximo en el eje en línea.
minBlockSize	"0"	Ajusta el tamaño mínimo en el eje de bloque.
minInlineSize	"0"	Ajusta el tamaño mínimo en el eje en línea.

Events

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

Escúchalos con listeners del estilo @afterhide en <SPopover>.

Slots

Slot	Descripción
default	El contenido que se muestra dentro del popover, que aparece en una superposición posicionada respecto a su elemento activador. Suele contener menús, listas de acciones o información complementaria.