SPopover <s-popover>

Floating content जो उसे खोलने वाले button से जुड़ा रहता है। SPopover Shopify के Polaris <s-popover> web component का typed Vue 3 wrapper है।

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

Best practices

• इसे द्वितीयक content के लिए रखें। Popover तब तक छिपा रहता है जब तक merchants उसे खोलते नहीं, इसलिए उसमें कम महत्वपूर्ण जानकारी और actions रखें, न कि ऐसा कुछ जो उन्हें तुरंत देखना हो।
• संबंधित actions को समूह में रखें। Popover के अंदर के actions आपस में संबंधित होने चाहिए।
• इसे स्पष्ट label वाले button से खोलें। Popover को default या variant="tertiary" वाले SButton से trigger करें, जिसका label बताए कि अंदर क्या है।

सभी सुझावों के लिए <s-popover> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

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	विवरण
blockSize	"auto" | "0"	block size समायोजित करें।
inlineSize	"auto" | "0"	inline size समायोजित करें।
maxBlockSize	"none" | "0"	अधिकतम block size समायोजित करें।
maxInlineSize	"none" | "0"	अधिकतम inline size समायोजित करें।
minBlockSize	"0"	न्यूनतम block size समायोजित करें।
minInlineSize	"0"	न्यूनतम inline size समायोजित करें।

Events

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

इन्हें <SPopover> पर @afterhide जैसे listeners से सुनें।

Slots

Slot	विवरण
default	popover के अंदर दिखाई जाने वाली सामग्री, जो अपने trigger element के सापेक्ष स्थित एक overlay में दिखाई देती है। इसमें आमतौर पर menus, action lists या अतिरिक्त जानकारी होती है।