SModal `<s-modal>`

集中して行うタスクや確認のためのダイアログオーバーレイ。コマンドやメソッド呼び出しで開きます。 SModal は、Shopify Polaris の <s-modal> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

モーダルは集中が必要な判断のためにとっておく。 マーチャントが特定の選択をする必要がある場合や、重要な事柄を確認する必要がある場合に開きます。タスクやツールをページ上に直接置けるなら、そこに置きます。
使用は控えめにする。 モーダルは毎回マーチャントの作業を中断させるため、デフォルトのパターンとしてではなく、重要な場面での最後の手段として扱います。
メインのアクションを目立たせる。 primary-action スロットに、明確で目立つコールトゥアクションを 1 つ置きます。
アクションには具体的な動詞でラベルを付ける。 「Delete」「Save」「Continue」のようなボタンは何が起きるかをマーチャントに伝えます。「Yes」「OK」「Submit」のような汎用的なラベルは避けます。
破壊的なアクションの結果を明記する。 アクションが何かを削除または破棄する場合は、マーチャントが何を失うのかをモーダル本文で説明します。
モーダルをネストしない。 すでに開いているモーダルの中から、2 つ目のモーダルを開かないようにします。

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 形式のリスナーで受け取れます。

Methods

<SModal> は、内部の DOM 要素で次のメソッドを公開しています（型付きのテンプレート 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 ​