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를 열고, 버튼 레이블에 안에 무엇이 있는지 담습니다.

전체 가이드는 <s-popover>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

Toggle popover

vue

<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 형식의 리스너로 이 events를 수신하세요.

Slots

Slot	설명
`default`	팝오버 안에 표시되는 콘텐츠로, 트리거 요소를 기준으로 배치되는 오버레이에 나타납니다. 일반적으로 메뉴, 액션 목록 또는 보조 정보를 담습니다.

SPopover <s-popover> ​

모범 사례 ​

예시 ​

Props ​

Events ​

Slots ​

SPopover `<s-popover>`

모범 사례

예시

Props

Events

Slots