SEmptyState <s-empty-state>

Erklärt, warum eine Ansicht noch keine Inhalte hat, und weist Händler auf die erste Aktion hin. SEmptyState ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-empty-state>.

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

Best Practices

• Erst die Ursache, dann die Lösung. Eine bloße Überschrift wie „No products“ lässt Händler rätseln. Erklären Sie mit heading, warum nichts da ist, und lassen Sie die Aktion den nächsten Schritt tragen.
• Mit einer primären Aktion führen. Verwenden Sie den Slot primary-action für den einen Schritt, der Händler aus dem leeren Zustand herausführt, und platzieren Sie weitere Optionen in secondary-actions.
• Gefilterte Ergebnisse anders formulieren. Eine Ressource ohne Inhalt und ein Filter ohne Treffer sind verschiedene Situationen. Sagen Sie Händlern bei gefilterten Ergebnissen, wie sie den Filter anpassen können.
• Die Grafik als Zugabe behandeln. Überschrift und Aktion leisten die eigentliche Arbeit. Lassen Sie den Slot graphic in dichten Layouts daher leer und beschränken Sie ihn sonst auf ein Icon oder Bild.

<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>

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-empty-state> (auf Englisch).

Beispiel

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	Typ	Beschreibung
heading	string	Die Überschrift des EmptyState.

Slots

Slot	Beschreibung
graphic	Eine Illustration oder ein Symbol über der Überschrift. Akzeptiert ein einzelnes Image oder Icon, entweder direkt oder als einziges Kind eines umschließenden Elements.
primary-action	Der wichtigste Call-to-Action, unterhalb des Textinhalts gerendert. Akzeptiert einen einzelnen Button mit der variant primary; alles andere wird mit einer Entwicklungswarnung ignoriert.
secondary-actions	Eine alternative Aktion, neben der primären gerendert. Akzeptiert einen einzelnen Button mit einer variant von secondary oder auto — trotz des Namens im Plural wird nur einer gerendert.
subheading	Unterstützender Text unterhalb der Überschrift, der erklärt, was fehlt oder was als Nächstes zu tun ist. Akzeptiert Text- und Link-Komponenten.