베타

이 App Bridge 컴포넌트는 새로 추가되었으며 아직 실제 Shopify admin에서 테스트되지 않았습니다. 베타 기간에는 마이너 릴리스에서 API가 바뀔 수 있습니다. 문제가 있으면 issue를 등록해 주세요.

AppWindow

시작하기 전에 설치를 참고하고, open에 대해서는 Modal을 참고하세요.

AppWindow는 s-app-window를 렌더링하며, @shopify/app-bridge-types 문서는 이를 "a fullscreen modal window in the Shopify admin"이라고 설명합니다. src는 필수입니다. "the URL is loaded in an iframe when the window opens".

vue

<script setup lang="ts">
import { ref } from 'vue'
import { AppWindow } from 'polaris-vue-elements/app-bridge'

const open = ref(false)
</script>

<template>
  <button @click="open = true">Edit in bulk</button>
  <AppWindow id="bulk-editor" src="/bulk-editor" v-model:open="open" />
</template>

open, v-model:open, show/hide, 언마운트 시 숨김은 Modal과 같이 동작합니다. slot은 없습니다.

AppWindow ​

AppWindow