SPage <s-page>

O layout de página de nível superior, com um título, ações de página e áreas de conteúdo. SPage é o wrapper de Vue 3 tipado do web component <s-page> do Shopify Polaris.

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

Boas práticas

• Dê um título a cada página. Defina heading com um título que descreva a página em que o lojista está.
• Adicione breadcrumbs dentro de um fluxo. Quando a página for uma etapa de um fluxo maior, coloque links de volta no slot breadcrumb-actions.
• Reserve as ações do cabeçalho para a página inteira. Coloque ações no cabeçalho apenas quando elas se aplicarem à página toda, e não a uma parte dela.
• Limite o número de ações. Use no máximo uma ação principal e três ações secundárias por página.
• Deixe o final da página livre de ações. Não coloque nenhuma ação no fim da página.

<SPage heading="Edit product">
  <template #breadcrumb-actions>
    <SLink href="/products">Products</SLink>
  </template>
  <template #primary-action>
    <SButton variant="primary">Save</SButton>
  </template>
  <template #secondary-actions>
    <SButton>Duplicate</SButton>
    <SButton>Archive</SButton>
  </template>
  <!-- … -->
</SPage>

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

Exemplo

No orders have been placed yet.Create order

<script setup>
import { SPage, SSection, SParagraph, SButton } from 'polaris-vue-elements'
</script>

<template>
  <SPage heading="Orders">
    <template #primary-action>
      <SButton variant="primary">Create order</SButton>
    </template>

    <SSection heading="Recent activity">
      <SParagraph>No orders have been placed yet.</SParagraph>
    </SSection>
  </SPage>
</template>

Props

Prop	Tipo	Descrição
heading	string	O título principal da página
inlineSize	"base" | "small" | "large"	O tamanho em linha da página - base corresponde a um tamanho em linha padrão definido - large largura total com espaço em branco

Slots

Slot	Descrição
default	O conteúdo principal da página exibido dentro do componente de página, que funciona como o contêiner principal das informações e dos elementos de interface da página.
aside	O conteúdo a ser exibido na seção lateral (aside) da página. Este slot só é renderizado quando inlineSize é "base".
breadcrumb-actions	As ações de navegação de volta da página. Aceita apenas componentes de link.
primary-action	A ação principal da página. Aceita apenas um único componente de botão com variant igual a primary.
secondary-actions	As ações secundárias da página. Aceita apenas componentes de grupo de botões e de botão com variant igual a secondary ou auto.
supplemental-start	Um slot para o conteúdo que vem antes do conteúdo principal, como um s-banner.