SEmptyState <s-empty-state>

Explique pourquoi une vue n'a pas encore de contenu et oriente les marchands vers la première action à effectuer. SEmptyState est le wrapper Vue 3 typé du web component <s-empty-state> de Shopify Polaris.

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

Bonnes pratiques

• Expliquez la cause, puis la solution. Un simple titre "No products" laisse les marchands deviner. Utilisez le heading pour dire pourquoi il n'y a rien, et laissez l'action porter l'étape suivante.
• Mettez en avant une seule action principale. Utilisez le slot primary-action pour l'étape qui permet aux marchands de sortir de l'état vide, et placez les autres options dans secondary-actions.
• Formulez différemment les résultats filtrés. Une ressource vide et un filtre qui ne renvoie rien sont deux situations différentes. Pour les résultats filtrés, indiquez aux marchands comment ajuster le filtre.
• Considérez l'illustration comme un plus. Le titre et l'action font l'essentiel du travail : laissez le slot graphic vide dans les mises en page denses et, si vous l'utilisez, limitez-le à une seule icône ou image.

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

Consultez les bonnes pratiques de Shopify pour <s-empty-state> (en anglais) pour l'ensemble des recommandations.

Exemple

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	Type	Description
heading	string	Le titre de l'EmptyState.

Slots

Slot	Description
graphic	Une illustration ou un symbole affiché au-dessus du titre. Accepte une seule Image ou Icon, soit directement, soit comme unique enfant d'un élément englobant.
primary-action	L'appel à l'action principal, rendu sous le contenu textuel. Accepte un seul Button avec un variant primary ; tout autre contenu est ignoré avec un avertissement en développement.
secondary-actions	Une action alternative, affichée à côté de l'action principale. Accepte un seul Button avec une variant égale à secondary ou auto : malgré le nom au pluriel, un seul est affiché.
subheading	Texte d'appui sous le titre, expliquant ce qui manque ou quoi faire ensuite. Accepte les composants Text et Link.