SPopover <s-popover>

Conteúdo flutuante ancorado ao botão que o abre. SPopover é o wrapper de Vue 3 tipado do web component <s-popover> do Shopify Polaris.

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

Boas práticas

• Reserve para conteúdo secundário. Um popover fica oculto até que os lojistas o abram, então coloque nele informações e ações menos importantes, e não algo que eles precisem ver de imediato.
• Agrupe ações relacionadas. As ações dentro de um popover devem estar relacionadas entre si.
• Abra a partir de um botão com rótulo claro. Acione o popover com um SButton padrão ou variant="tertiary" cujo rótulo diga o que há dentro.

Veja as boas práticas da Shopify para <s-popover> (em inglês) para todas as recomendações.

Exemplo

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	Descrição
blockSize	"auto" | "0"	Ajusta o tamanho no eixo de bloco.
inlineSize	"auto" | "0"	Ajusta o tamanho no eixo em linha.
maxBlockSize	"none" | "0"	Ajusta o tamanho máximo no eixo de bloco.
maxInlineSize	"none" | "0"	Ajusta o tamanho máximo no eixo em linha.
minBlockSize	"0"	Ajusta o tamanho mínimo no eixo de bloco.
minInlineSize	"0"	Ajusta o tamanho mínimo no eixo em linha.

Events

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

Escute-os com listeners no estilo @afterhide em <SPopover>.

Slots

Slot	Descrição
default	O conteúdo exibido dentro do popover, que aparece em uma sobreposição posicionada em relação ao elemento que o aciona. Normalmente contém menus, listas de ações ou informações complementares.