SEmptyState <s-empty-state>

Giải thích vì sao một màn hình chưa có nội dung và chỉ cho người bán hành động đầu tiên cần thực hiện. SEmptyState là Vue 3 wrapper có type cho web component <s-empty-state> của Shopify Polaris.

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

Best practices

• Giải thích nguyên nhân, rồi đến cách khắc phục. Một tiêu đề trơn "No products" khiến người bán phải đoán. Dùng heading để nói vì sao chưa có gì, và để hành động đảm nhận bước tiếp theo.
• Dẫn dắt bằng một hành động chính. Dùng slot primary-action cho bước duy nhất đưa người bán ra khỏi trạng thái trống, và đặt các lựa chọn khác trong secondary-actions.
• Diễn đạt khác cho kết quả lọc. Một tài nguyên chưa có gì và một bộ lọc không khớp gì là hai tình huống khác nhau. Với kết quả lọc, hãy cho người bán biết cách điều chỉnh bộ lọc.
• Coi hình minh họa là phần thêm. Tiêu đề và hành động mới là phần chính, vì vậy hãy để trống slot graphic trong bố cục dày đặc, và khi có dùng, hãy giới hạn ở một icon hoặc một hình ảnh.

<SEmptyState heading="You haven't added any products yet">
  <template #primary-action>
    <SButton variant="primary">Add product</SButton>
  </template>
  <template #secondary-actions>
    <SButton>Import products</SButton>
  </template>
</SEmptyState>

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

Ví dụ

Once a customer places an order, it will show up here. Learn more about ordersCreate orderImport orders

<script setup>
import { SEmptyState, SButton, SIcon, SText, SLink } from 'polaris-vue-elements'
</script>

<template>
  <SEmptyState heading="No orders yet">
    <template #graphic>
      <SIcon type="cart" size="large" />
    </template>
    <template #subheading>
      <SText>Once a customer places an order, it will show up here. <SLink href="https://help.shopify.com/orders" target="_blank">Learn more about orders</SLink></SText>
    </template>
    <template #primary-action>
      <SButton variant="primary">Create order</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Import orders</SButton>
    </template>
  </SEmptyState>
</template>

Props

Prop	Kiểu	Mô tả
heading	string	Tiêu đề của EmptyState.

Slots

Slot	Mô tả
graphic	Hình minh họa hoặc biểu tượng hiển thị phía trên tiêu đề. Chấp nhận một Image hoặc Icon duy nhất, đặt trực tiếp hoặc là phần tử con duy nhất của một phần tử bao bọc.
primary-action	Lời kêu gọi hành động chính, được render bên dưới nội dung văn bản. Chấp nhận một Button duy nhất có variant là primary; mọi thứ khác sẽ bị bỏ qua kèm cảnh báo trong môi trường development.
secondary-actions	Một hành động thay thế, được render bên cạnh hành động chính. Chấp nhận một Button duy nhất có variant là secondary hoặc auto — dù tên ở dạng số nhiều, chỉ một nút được render.
subheading	Văn bản hỗ trợ bên dưới tiêu đề, giải thích điều gì đang thiếu hoặc cần làm gì tiếp theo. Chấp nhận các component Text và Link.