SPopover <s-popover>

Nội dung nổi được neo vào nút mở nó. SPopover là Vue 3 wrapper có type cho web component <s-popover> của Shopify Polaris.

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

Best practices

• Dành cho nội dung phụ. Popover bị ẩn cho đến khi người bán mở nó, nên hãy đặt ở đó thông tin và hành động ít quan trọng hơn, không phải những gì họ cần thấy ngay.
• Nhóm các hành động liên quan. Các hành động bên trong một popover nên thuộc về cùng một nhóm.
• Mở nó từ một nút có nhãn rõ ràng. Kích hoạt popover bằng một SButton mặc định hoặc variant="tertiary" có nhãn cho biết bên trong có gì.

Xem best practices của Shopify cho <s-popover> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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	Kiểu	Mô tả
blockSize	"auto" | "0"	Điều chỉnh kích thước theo trục block.
inlineSize	"auto" | "0"	Điều chỉnh kích thước theo trục inline.
maxBlockSize	"none" | "0"	Điều chỉnh kích thước tối đa theo trục block.
maxInlineSize	"none" | "0"	Điều chỉnh kích thước tối đa theo trục inline.
minBlockSize	"0"	Điều chỉnh kích thước tối thiểu theo trục block.
minInlineSize	"0"	Điều chỉnh kích thước tối thiểu theo trục inline.

Events

Event	Kiểu
afterhide	CustomEvent
aftershow	CustomEvent
aftertoggle	Event
hide	CustomEvent
show	CustomEvent
toggle	Event

Lắng nghe các event này bằng listener dạng @afterhide trên <SPopover>.

Slots

Slot	Mô tả
default	Nội dung được hiển thị bên trong popover, xuất hiện trong một overlay được định vị tương đối với phần tử kích hoạt. Thường chứa menu, danh sách hành động hoặc thông tin bổ sung.