SModal `<s-modal>`

Một hộp thoại overlay cho các tác vụ cần tập trung và xác nhận, được mở bằng một lệnh hoặc lời gọi phương thức. SModal là Vue 3 wrapper có type cho web component <s-modal> của Shopify Polaris.

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

Best practices

Chỉ dùng modal cho quyết định cần sự tập trung. Mở modal khi người bán phải đưa ra một lựa chọn cụ thể hoặc xác nhận một điều quan trọng. Nếu tác vụ hoặc công cụ có thể nằm ngay trên trang, hãy giữ nó ở đó.
Dùng một cách hạn chế. Mỗi modal đều làm gián đoạn người bán, vì vậy hãy coi nó là giải pháp cuối cùng cho những thời điểm quan trọng, không phải một pattern mặc định.
Làm cho hành động chính nổi bật. Cho modal một lời kêu gọi hành động rõ ràng, nổi bật trong slot primary-action.
Gắn nhãn hành động bằng động từ cụ thể. Các button như "Delete", "Save" hay "Continue" cho người bán biết điều gì sẽ xảy ra; tránh nhãn chung chung như "Yes", "OK" hay "Submit".
Nói rõ hậu quả của hành động phá hủy. Khi hành động xóa hoặc hủy bỏ một thứ gì đó, hãy mô tả trong nội dung modal những gì người bán sẽ mất.
Đừng lồng modal. Tránh mở một modal thứ hai từ bên trong một modal đang mở.

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>

Xem best practices của Shopify cho <s-modal> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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	Kiểu	Mô tả
`accessibilityLabel`	`string`	Nhãn mô tả mục đích của modal. Khi được đặt, nhãn sẽ được đọc cho người dùng công nghệ hỗ trợ và cung cấp thêm ngữ cảnh cho họ. Nhãn này ghi đè prop `heading` đối với trình đọc màn hình.
`heading`	`string`	Tiêu đề mô tả nội dung của modal.
`padding`	`"base" \| "none"`	Điều chỉnh padding quanh nội dung modal. `base`: áp dụng padding phù hợp với phần tử. `none`: loại bỏ toàn bộ padding khỏi phần tử. Điều này hữu ích khi các phần tử bên trong modal cần trải dài đến mép modal, ví dụ một hình ảnh toàn chiều rộng. Trong trường hợp này, hãy dùng box có padding 'base' để khôi phục padding mong muốn cho phần nội dung còn lại.
`size`	`"base" \| "small-100" \| "small" \| "large" \| "large-100"`	Kích thước của component modal, điều khiển chiều rộng và chiều cao. Kích thước lớn hơn cung cấp nhiều không gian hơn cho nội dung, còn kích thước nhỏ hơn thì gọn hơn.

Events

Event	Kiểu
`afterhide`	`CustomEvent`
`aftershow`	`CustomEvent`
`hide`	`CustomEvent`
`show`	`CustomEvent`

Lắng nghe các event này bằng listener dạng @afterhide trên <SModal>.

Methods

<SModal> cung cấp các method sau trên DOM element bên dưới (truy cập qua template ref có type):

hideOverlay() => void — Phương thức để ẩn một overlay.
showOverlay() => void — Phương thức để hiển thị một overlay.
toggleOverlay() => void — Phương thức để bật/tắt hiển thị của một overlay.

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	Mô tả
`default`	Nội dung được hiển thị bên trong component modal, thường bao gồm các trường form, thông tin hoặc các phần tử tương tác.
`primary-action`	Button hành động chính hiển thị ở footer của modal, đại diện cho hành động chính mà người dùng nên thực hiện. Chỉ chấp nhận một component button duy nhất có `variant` là `primary`. Hành động này nên phù hợp với mục đích chính của modal.
`secondary-actions`	Các nút hành động bổ sung hiển thị ở footer của modal, cung cấp các hành động thay thế hoặc hỗ trợ. Chỉ chấp nhận button component có `variant` là `secondary` hoặc `auto`. Các nút này được giảm nhấn mạnh về mặt thị giác để tạo thứ bậc rõ ràng.

SModal <s-modal> ​

Best practices ​

Ví dụ ​

Props ​

Events ​

Methods ​

Slots ​