SPage <s-page>

Das Seitenlayout der obersten Ebene, mit Überschrift, Seitenaktionen und Inhaltsbereichen. SPage ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-page>.

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

Best Practices

• Jeder Seite einen Titel geben. Setzen Sie heading auf einen Titel, der die Seite beschreibt, auf der sich der Händler befindet.
• Innerhalb eines Ablaufs Breadcrumbs hinzufügen. Ist die Seite ein Schritt in einem größeren Ablauf, setzen Sie Links zurück in den Slot breadcrumb-actions.
• Header-Aktionen seitenweit halten. Platzieren Sie Aktionen nur dann im Header, wenn sie für die ganze Seite gelten, nicht nur für einen Teil davon.
• Anzahl der Aktionen begrenzen. Verwenden Sie höchstens eine primäre und drei sekundäre Aktionen pro Seite.
• Das Seitenende frei von Aktionen halten. Platzieren Sie keine Aktionen am Ende der Seite.

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

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-page> (auf Englisch).

Beispiel

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	Typ	Beschreibung
heading	string	Die Hauptüberschrift der Seite
inlineSize	"base" | "small" | "large"	Die Inline-Größe der Seite - base entspricht einer festgelegten Standard-Inline-Größe - large volle Breite mit Leerraum

Slots

Slot	Beschreibung
default	Der Hauptinhalt der Seite innerhalb der Page-Komponente, die als primärer Container für die Informationen und Oberflächenelemente der Seite dient.
aside	Der Inhalt, der im Seitenbereich (aside) der Seite angezeigt wird. Dieser Slot wird nur gerendert, wenn inlineSize "base" ist.
breadcrumb-actions	Die Zurück-Navigationsaktionen der Seite. Akzeptiert nur Link-Komponenten.
primary-action	Die primäre Aktion der Seite. Akzeptiert nur eine einzelne Button-Komponente mit der variant primary.
secondary-actions	Die sekundären Aktionen der Seite. Akzeptiert nur Button-Group- und Button-Komponenten mit der variant secondary oder auto.
supplemental-start	Ein Slot für Inhalte vor dem Hauptinhalt, etwa ein s-banner.