SPage <s-page>

El diseño de página de nivel superior, con un encabezado, acciones de página y áreas de contenido. SPage es el wrapper de Vue 3 tipado del web component <s-page> de Shopify Polaris.

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

Buenas prácticas

• Da un título a cada página. Define heading con un título que describa la página en la que se encuentra el comerciante.
• Añade migas de pan dentro de un flujo. Cuando la página sea un paso de un flujo más amplio, coloca enlaces de regreso en el slot breadcrumb-actions.
• Reserva las acciones del encabezado para toda la página. Coloca acciones en el encabezado solo cuando se apliquen a toda la página, no a una parte de ella.
• Limita el número de acciones. Usa como máximo una acción principal y tres acciones secundarias por página.
• No pongas acciones al final de la página. No coloques ninguna acción en la parte inferior de la 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>

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

Ejemplo

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	Descripción
heading	string	El encabezado principal de la página
inlineSize	"base" | "small" | "large"	El tamaño en línea de la página - base corresponde a un tamaño en línea predeterminado - large ancho completo con espacio en blanco

Slots

Slot	Descripción
default	El contenido principal de la página que se muestra dentro del componente page, que sirve como contenedor principal de la información y los elementos de interfaz de la página.
aside	El contenido que se muestra en la sección lateral (aside) de la página. Este slot solo se muestra cuando inlineSize es "base".
breadcrumb-actions	Las acciones de navegación hacia atrás de la página. Solo acepta componentes link.
primary-action	La acción principal de la página. Solo acepta un único componente button con un variant de primary.
secondary-actions	Las acciones secundarias de la página. Solo acepta componentes button group y button con un variant de secondary o auto.
supplemental-start	Un slot para el contenido que va antes del contenido principal, como un s-banner.