SModal `<s-modal>`

집중이 필요한 작업과 확인을 위한 대화상자 오버레이로, 명령이나 method 호출로 엽니다. SModal은(는) Shopify Polaris <s-modal> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

모달은 집중이 필요한 결정에만 사용하세요. 판매자가 특정한 선택을 하거나 중요한 사항을 확인해야 할 때 모달을 엽니다. 작업이나 도구가 페이지에 직접 있어도 된다면 페이지에 둡니다.
꼭 필요할 때만 사용하세요. 모든 모달은 판매자의 흐름을 끊으므로, 기본 패턴이 아니라 중요한 순간을 위한 최후의 수단으로 취급합니다.
주요 액션을 돋보이게 하세요. primary-action 슬롯에 명확하고 눈에 띄는 행동 유도 버튼 하나를 둡니다.
액션 레이블에 구체적인 동사를 사용하세요. "Delete", "Save", "Continue" 같은 버튼은 무슨 일이 일어날지 판매자에게 알려 줍니다. "Yes", "OK", "Submit" 같은 일반적인 레이블은 피합니다.
파괴적인 액션의 결과를 분명히 밝히세요. 액션이 무언가를 삭제하거나 폐기한다면, 판매자가 무엇을 잃게 되는지 모달 본문에서 설명합니다.
모달을 중첩하지 마세요. 이미 열려 있는 모달 안에서 두 번째 모달을 여는 것은 피합니다.

vue

<SModal id="delete-product" heading="Delete product?">
  <SParagraph>This permanently deletes the product and its variants. You can't undo this.</SParagraph>
  <SButton slot="primary-action" tone="critical">Delete product</SButton>
  <SButton slot="secondary-actions">Cancel</SButton>
</SModal>

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

예시

Open modal

vue

<script setup>
import { SButton, SModal } from 'polaris-vue-elements'
</script>

<template>
  <SButton commandFor="example-modal" command="--show">Open modal</SButton>

  <SModal id="example-modal" heading="Example modal">
    <p>Modal body content goes here.</p>

    <!-- The runtime only accepts a primary-action button with variant="primary",
         and secondary-actions buttons with variant="secondary" (or "auto"). -->
    <template #primary-action>
      <SButton variant="primary">Save</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Cancel</SButton>
    </template>
  </SModal>
</template>

Props

Prop	타입	설명
`accessibilityLabel`	`string`	모달의 목적을 설명하는 레이블입니다. 설정하면 보조 기술을 사용하는 사용자에게 읽혀 더 많은 맥락을 제공합니다. 스크린 리더에서는 `heading` prop보다 우선합니다.
`heading`	`string`	모달의 내용을 설명하는 제목입니다.
`padding`	`"base" \| "none"`	모달 콘텐츠 주위의 패딩을 조정합니다. `base`: 요소에 적합한 패딩을 적용합니다. `none`: 요소의 모든 패딩을 제거합니다. 모달 안의 요소가 모달 가장자리까지 걸쳐야 할 때 유용합니다(예: 전체 너비 이미지). 이 경우 나머지 콘텐츠에는 패딩이 'base'인 box를 사용해 원하는 패딩을 다시 적용하세요.
`size`	`"base" \| "small-100" \| "small" \| "large" \| "large-100"`	모달 컴포넌트의 크기로, 너비와 높이를 제어합니다. 큰 크기는 콘텐츠에 더 많은 공간을 제공하고, 작은 크기는 더 컴팩트합니다.

Events

Event	타입
`afterhide`	`CustomEvent`
`aftershow`	`CustomEvent`
`hide`	`CustomEvent`
`show`	`CustomEvent`

<SModal>에서 @afterhide 형식의 리스너로 이 events를 수신하세요.

Methods

<SModal>은(는) 기반 DOM element에 다음 methods를 제공합니다(타입이 지정된 template ref로 접근):

hideOverlay() => void — 오버레이를 숨기는 메서드입니다.
showOverlay() => void — 오버레이를 표시하는 메서드입니다.
toggleOverlay() => void — 오버레이의 표시 여부를 전환하는 메서드입니다.

vue

<script setup>
import { useTemplateRef } from 'vue'
import { SModal } from 'polaris-vue-elements'

const modal = useTemplateRef<InstanceType<typeof SModal>>('modal')

function callHideOverlay() {
  modal.value?.$el.hideOverlay()
}
</script>

<template>
  <SModal ref="modal" />
</template>

Slots

Slot	설명
`default`	모달 컴포넌트 안에 표시되는 콘텐츠로, 일반적으로 폼 필드, 정보 또는 인터랙티브 요소를 포함합니다.
`primary-action`	모달 푸터에 표시되는 주 액션 버튼으로, 사용자가 취해야 할 기본 액션을 나타냅니다. `variant`가 `primary`인 단일 버튼 컴포넌트만 허용합니다. 이 액션은 모달의 주요 목적과 일치해야 합니다.
`secondary-actions`	모달 푸터에 표시되어 대체 액션이나 보조 액션을 제공하는 추가 액션 버튼입니다. `variant`가 `secondary` 또는 `auto`인 버튼 컴포넌트만 받습니다. 명확한 위계를 위해 시각적으로 덜 강조됩니다.

SModal <s-modal> ​

모범 사례 ​

예시 ​

Props ​

Events ​

Methods ​

Slots ​