SSection <s-section>

Gruppiert zusammengehörige Inhalte, optional mit Überschrift, Unterüberschrift und Aktionen. SSection ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-section>.

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

Best Practices

• Zusammengehörige Inhalte gruppieren. Geben Sie jeder Section eine einzige, stimmige Aufgabe, ob zusammengehörige Informationen oder zusammengehörige Bedienelemente; dann dient sie als visueller Container und gibt der Seitenstruktur Bedeutung.
• Aussagekräftige Überschriften schreiben. Händler überfliegen die heading, um sich zu orientieren. Sagen Sie daher, was enthalten ist, statt auf einen allgemeinen Titel auszuweichen.
• Nur so tief verschachteln, wie der Inhalt es braucht. Eine verschachtelte Section wirkt sich auf die Überschriftenhierarchie und die Gliederung der Seite aus, nicht auf das Aussehen. Bleiben Sie bei höchstens zwei oder drei Ebenen und verschachteln Sie nur, wenn die zusätzliche Struktur den Inhalt klarer macht.
• Padding weglassen, wenn Inhalte randlos sein sollen. Verwenden Sie padding="none" für Tabellen oder Bilder, die die Section ausfüllen sollen, und prüfen Sie dann, ob der innere Inhalt selbst genug Abstand behält.
• accessibilityLabel ergänzen, wenn die Überschrift nicht reicht. Lässt die sichtbare Überschrift den Zweck der Section für Screenreader-Nutzer unklar, geben Sie ihnen ein Label, das den fehlenden Kontext ergänzt.
• Den richtigen Header-Slot wählen. Details, die die Überschrift selbst ergänzen, etwa ein Tooltip oder eine Anzahl, gehören in accessory. Informationen zur Section als Ganzes, etwa ein Status-Badge, gehören in supplemental. Aktionen wie ein Button oder Menü gehören in accessory, da supplemental keine aufnimmt.

<SSection heading="Products" padding="none">
  <STable>
    <!-- … -->
  </STable>
</SSection>

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

Beispiel

123 Main Street, Ottawa, ON, CanadaDelivery instructions: leave at front door.

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

<template>
  <SSection heading="Shipping address">
    <SParagraph>123 Main Street, Ottawa, ON, Canada</SParagraph>
    <SDivider />
    <SParagraph color="subdued">Delivery instructions: leave at front door.</SParagraph>
  </SSection>
</template>

Props

Prop	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt der Komponente für assistive Technologien wie Screenreader beschreibt. Damit lässt sich zusätzlicher Kontext bereitstellen, wenn der sichtbare Inhalt allein den Zweck der Komponente nicht klar vermittelt.
heading	string	Der Überschriftentext, der oben in der Section angezeigt wird. Diese Überschrift liefert einen Titel für den Inhalt der Section und verwendet abhängig von der Verschachtelungstiefe automatisch die passende semantische Überschriftenebene (h2, h3, h4), um eine korrekte Dokumentstruktur zu gewährleisten.
padding	"base" | "none"	Das Padding an allen Kanten des Elementinhalts. - base: Wendet ein für das Element passendes Padding an. Beachten Sie, dass dies auch zu keinem Padding führen kann, wenn das in einem bestimmten Kontext die richtige Designentscheidung ist. - none: Entfernt jegliches Padding vom Inhalt des Elements. Das ist nützlich, wenn Elemente innerhalb der Section bis an deren Rand reichen sollen, zum Beispiel ein Bild in voller Breite. Verwenden Sie in diesem Fall s-box mit einem Padding von 'base', um das gewünschte Padding für den restlichen Inhalt wiederherzustellen. Die heading und die Header-Aktionen behalten ihr Padding und lassen sich daher mit none kombinieren.
subheading	string	Unterstützender Text, der die Überschrift ergänzt und darunter zurückgenommen dargestellt wird. Dies ist keine Überschrift: Er fügt keinen Eintrag zur Dokumentgliederung hinzu, ändert nicht die Überschriftenebene der Kindelemente des Abschnitts und wird nicht als Teil der Überschrift vorgelesen. Alles, was diesen Abschnitt von anderen unterscheidet, gehört in heading, denn das hören Personen, die per Überschriften navigieren.

Slots

Slot	Beschreibung
default	Der Inhalt innerhalb der Section-Komponente, die zusammengehörige Elemente zu einer logischen Einheit mit optionaler Überschrift gruppiert.
accessory	Zusätzliche kontextbezogene Informationen, die die Überschrift näher bestimmen, inline neben dem Überschriftentext gerendert. Akzeptiert nur Badge-, Icon-, Button-, Menu-, Text-, Avatar-, Thumbnail- und Tooltip-Elemente. Text muss tone, fontSize und fontWeight mit auto verwenden; Icon, Avatar und Thumbnail müssen size="base" verwenden; Badge muss size="base" und color="base" verwenden; Button muss inlineSize="auto" verwenden. Ein Tooltip, auf das das interestFor eines Accessory-Elements verweist, kann hier daneben platziert werden.
graphic	Ein dekoratives Bildelement, das die Überschrift unterstreicht und vor ihr gerendert wird. Akzeptiert ein einzelnes Icon mit size base oder ein reines Icon-Badge (icon gesetzt, kein Textinhalt) mit size large. Die Überschrift identifiziert den Abschnitt, daher wird dieser Inhalt von assistiven Technologien nicht vorgelesen und gar nicht gerendert, wenn der Abschnitt keine heading hat.
primary-action	Der primäre Aktionsbutton oder -link, der die wichtigste Aktion in diesem Kontext darstellt. Wird typischerweise visuell stärker hervorgehoben als sekundäre Aktionen, um eine klare Hierarchie zu schaffen.
secondary-actions	Zusätzliche Aktions-Buttons oder Links für alternative oder unterstützende Aktionen. Visuell zurückgenommen gegenüber der primären Aktion. Eine ButtonGroup mit einer Aktion und dem reinen Icon-Aktivator für ihr Menu wird als eine segmentierte Gruppe mit Chevron-Aktivator gerendert. Die Gruppe benötigt ein accessibilityLabel und muss genau einen Button mit Text enthalten, gefolgt von einem Button ohne Text, der ein accessibilityLabel und ein commandFor zum Öffnen eines Menu hat, beide mit einer variant von secondary oder auto.
supplemental	Status oder Metadaten, die den Abschnitt als Ganzes beschreiben, statt seine Überschrift näher zu bestimmen, gerendert am Inline-Ende des Headers vor etwaigen Aktionen. Dies ist keine Aktion. Akzeptiert nur Badge-, Avatar-, Text-, Icon-, Thumbnail- und Tooltip-Elemente, mit denselben Prop-Einschränkungen wie bei accessory.