SPopover <s-popover>

锚定在打开它的按钮上的浮动内容。 SPopover 是 Shopify Polaris <s-popover> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 用于次要内容。 popover 在商家打开之前一直是隐藏的，因此请将不太重要的信息和操作放在其中，而不是任何需要立即看到的内容。
• 将相关操作分组。 popover 中的操作应彼此相关。
• 通过标签清晰的按钮打开。 使用默认样式或 variant="tertiary" 的 SButton 来触发 popover，并让按钮标签说明其中的内容。

参阅 Shopify 关于 <s-popover> 的最佳实践（英文）以获取完整指南。

示例

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	类型	说明
blockSize	"auto" | "0"	调整块方向尺寸。
inlineSize	"auto" | "0"	调整行内方向尺寸。
maxBlockSize	"none" | "0"	调整最大块方向尺寸。
maxInlineSize	"none" | "0"	调整最大行内方向尺寸。
minBlockSize	"0"	调整最小块方向尺寸。
minInlineSize	"0"	调整最小行内方向尺寸。

Events

Event	类型
afterhide	CustomEvent
aftershow	CustomEvent
aftertoggle	Event
hide	CustomEvent
show	CustomEvent
toggle	Event

在 <SPopover> 上使用 @afterhide 形式的监听器来监听这些事件。

Slots

Slot	说明
default	弹出框中显示的内容。弹出框出现在相对于其触发元素定位的浮层中，通常包含菜单、操作列表或补充信息。