SEmptyState <s-empty-state>

Explica por qué una vista aún no tiene contenido e indica a los comerciantes la primera acción que deben realizar. SEmptyState es el wrapper de Vue 3 tipado del web component <s-empty-state> de Shopify Polaris.

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

Buenas prácticas

• Explica la causa y luego la solución. Un simple encabezado "No products" deja a los comerciantes adivinando. Usa el heading para explicar por qué no hay nada y deja que la acción indique el siguiente paso.
• Destaca una única acción principal. Usa el slot primary-action para el paso que saca a los comerciantes del estado vacío y coloca las demás opciones en secondary-actions.
• Redacta de otra forma los resultados filtrados. Un recurso sin contenido y un filtro que no encontró nada son situaciones distintas. Para los resultados filtrados, indica a los comerciantes cómo ajustar el filtro.
• Trata la ilustración como un extra. El encabezado y la acción hacen el trabajo, así que deja vacío el slot graphic en diseños densos y, cuando lo uses, limítalo a un solo icono o imagen.

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

Consulta las buenas prácticas de Shopify para <s-empty-state> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Tipo	Descripción
heading	string	El encabezado del EmptyState.

Slots

Slot	Descripción
graphic	Una ilustración o un símbolo que se muestra encima del encabezado. Acepta un único Image o Icon, ya sea directamente o como único hijo de un elemento contenedor.
primary-action	La llamada a la acción principal, que se renderiza debajo del contenido de texto. Acepta un único Button con un variant de primary; cualquier otra cosa se ignora con una advertencia en desarrollo.
secondary-actions	Una acción alternativa que se muestra junto a la principal. Acepta un único Button con una variant de secondary o auto; aunque el nombre está en plural, solo se muestra uno.
subheading	Texto de apoyo debajo del encabezado que explica qué falta o qué hacer a continuación. Acepta componentes Text y Link.