SPage <s-page>

La mise en page de premier niveau, avec un titre, des actions de page et des zones de contenu. SPage est le wrapper Vue 3 typé du web component <s-page> de Shopify Polaris.

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

Bonnes pratiques

• Donnez un titre à chaque page. Définissez heading sur un titre qui décrit la page sur laquelle se trouve le marchand.
• Ajoutez un fil d'Ariane au sein d'un parcours. Lorsque la page est une étape d'un parcours plus large, placez des liens de retour dans le slot breadcrumb-actions.
• Réservez les actions de l'en-tête à la page entière. Ne placez des actions dans l'en-tête que si elles concernent toute la page, pas une seule de ses parties.
• Limitez le nombre d'actions. Utilisez au plus une action principale et trois actions secondaires par page.
• Ne placez aucune action en bas de page. N'ajoutez pas d'actions à la fin de la page.

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

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

Exemple

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	Type	Description
heading	string	Le titre principal de la page
inlineSize	"base" | "small" | "large"	La taille inline de la page - base correspond à une taille inline par défaut définie - large pleine largeur avec des marges

Slots

Slot	Description
default	Le contenu principal de la page affiché dans le composant page, qui sert de conteneur principal pour les informations et les éléments d'interface de la page.
aside	Le contenu à afficher dans la section latérale (aside) de la page. Ce slot n'est rendu que lorsque inlineSize vaut "base".
breadcrumb-actions	Les actions de navigation retour de la page. N'accepte que des composants link.
primary-action	L'action principale de la page. N'accepte qu'un seul composant button avec un variant primary.
secondary-actions	Les actions secondaires de la page. N'accepte que des composants button group et button avec un variant secondary ou auto.
supplemental-start	Un slot pour le contenu placé avant le contenu principal, comme un s-banner.