SModal `<s-modal>`

用于专注任务和确认操作的对话框浮层，可通过命令或方法调用打开。 SModal 是 Shopify Polaris <s-modal> web component 的带类型 Vue 3 wrapper。

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

最佳实践

只在需要专注做出决定时使用模态框。 当商家必须做出特定选择或确认某个关键信息时才打开模态框。如果任务或工具可以直接放在页面上，就放在页面上。
谨慎使用。 每个模态框都会打断商家，因此应把它当作重要时刻的最后手段，而不是默认模式。
突出主要操作。 在 primary-action slot 中为模态框提供一个清晰、醒目的行动号召。
使用具体的动词作为操作标签。 “删除”“保存”或“继续”这样的按钮能告诉商家会发生什么；避免使用“是”“确定”或“提交”这类笼统的标签。
讲清破坏性操作的后果。 当操作会删除或丢弃某些内容时，在模态框正文中说明商家将失去什么。
不要嵌套模态框。 避免在已打开的模态框中再打开另一个模态框。

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>

参阅 Shopify 关于 <s-modal> 的最佳实践（英文）以获取完整指南。

示例

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`：移除元素的所有内边距。当模态框内的元素需要延伸到模态框边缘时，这会很有用，例如全宽图片。在这种情况下，可以使用 padding 为 '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 ​