SEmptyState <s-empty-state>

Explica por que uma visualização ainda não tem conteúdo e indica aos lojistas a primeira ação a realizar. SEmptyState é o wrapper de Vue 3 tipado do web component <s-empty-state> do Shopify Polaris.

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

Boas práticas

• Explique a causa e depois a solução. Um título seco como "Nenhum produto" deixa os lojistas tentando adivinhar. Use o heading para dizer por que não há nada ali e deixe a ação indicar o próximo passo.
• Comece com uma única ação principal. Use o slot primary-action para o passo que tira os lojistas do estado vazio e coloque as outras opções em secondary-actions.
• Redija os resultados filtrados de outro jeito. Um recurso sem nada e um filtro que não encontrou nada são situações diferentes. Para resultados filtrados, diga aos lojistas como ajustar o filtro.
• Trate o gráfico como um extra. O título e a ação fazem o trabalho, então deixe o slot graphic vazio em layouts densos e, quando usá-lo, limite-o a um ícone ou imagem.

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

Veja as boas práticas da Shopify para <s-empty-state> (em inglês) para todas as recomendações.

Exemplo

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	Descrição
heading	string	O título do EmptyState.

Slots

Slot	Descrição
graphic	Uma ilustração ou um símbolo exibido acima do título. Aceita um único Image ou Icon, diretamente ou como único filho de um elemento contêiner.
primary-action	A chamada para ação principal, renderizada abaixo do conteúdo de texto. Aceita um único Button com variant igual a primary; qualquer outra coisa é ignorada com um aviso de desenvolvimento.
secondary-actions	Uma ação alternativa, exibida ao lado da principal. Aceita um único Button com variant igual a secondary ou auto; apesar do nome no plural, apenas um é exibido.
subheading	Texto de apoio abaixo do título, explicando o que está faltando ou o que fazer em seguida. Aceita componentes Text e Link.