SStack <s-stack>

Ordnet seine Kinder in einer Zeile oder Spalte mit einheitlichem Abstand und einheitlicher Ausrichtung an. SStack ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-stack>.

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

Best Practices

• Abstände spiegeln Beziehungen. Ein kleiner gap signalisiert, dass Elemente zusammengehören, ein größerer trennt eigenständige Gruppen. Wählen Sie den Abstand passend zur Hierarchie Ihrer Inhalte.
• Mit Umbrüchen in Inline-Stacks rechnen. Mit direction="inline" rücken Elemente in eine neue Zeile, wenn der Platz nicht reicht. Das ist meist gewünscht; brauchen Sie aber genaue Kontrolle über Zeilenumbrüche oder mehrere Zeilen, greifen Sie zu einem anderen Layoutansatz.
• Ausrichtung bewusst festlegen. Die Standardausrichtung passt für die meisten Layouts. Passen Sie alignItems oder justifyContent an, wenn Elemente unterschiedlich groß sind oder eine bestimmte Position brauchen.

<SStack direction="inline" gap="small-200" alignItems="center">
  <SBadge>Draft</SBadge>
  <SText>Last edited today</SText>
</SStack>

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

Beispiel

Item 1Item 2Item 3

<script setup>
import { SStack, SBox, SText } from 'polaris-vue-elements'
</script>

<template>
  <SStack direction="inline" gap="large" alignItems="center">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 1</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 2</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 3</SText>
    </SBox>
  </SStack>
</template>

Props

Prop	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt des Elements beschreibt. Wenn gesetzt, wird es Nutzern assistiver Technologien vorgelesen und gibt ihnen mehr Kontext. Nur verwenden, wenn der Inhalt des Elements Nutzern assistiver Technologien nicht genug Kontext bietet.
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	Legt die semantische Bedeutung des Inhalts der Komponente fest. Wenn gesetzt, wird die Rolle von assistiven Technologien genutzt, um Nutzern die Navigation auf der Seite zu erleichtern.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Ändert die Sichtbarkeit des Elements. - visible: Das Element ist für alle Nutzer sichtbar. - hidden: Das Element wird aus dem Accessibility Tree entfernt, bleibt aber sichtbar. - exclusive: Das Element ist visuell ausgeblendet, bleibt aber im Accessibility Tree.
alignContent	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (9 more)	Steuert die Verteilung der Zeilen entlang der Blockachse, wenn Inhalt auf mehrere Zeilen umbricht. Diese Eigenschaft wirkt nur auf Stacks mit umbrechendem Inhalt. Für einzeilige Stacks stattdessen alignItems verwenden.
alignItems	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (6 more)	Steuert die Ausrichtung der Kindelemente entlang der Blockachse (vertikal bei horizontalen Schreibrichtungen). Damit werden Elemente senkrecht zur Stack-Richtung ausgerichtet – vertikal bei Inline-Stacks oder horizontal bei Block-Stacks.
background	"subdued" | "base" | "strong" | "transparent"	Die Hintergrundfarbe der Komponente.
blockSize	"auto" | "0"	Die vertikale Größe des Elements in Standardlayouts (Höhe bei Schreibrichtungen von links nach rechts oder von rechts nach links). Die Block-Größe passt sich der Schreibrichtung an: In horizontalen Layouts steuert sie die Höhe, in vertikalen Layouts die Breite. Dies sorgt für konsistentes Verhalten über verschiedene Textrichtungen hinweg. Weitere Informationen zu block-size.
border	BorderShorthand	Ein Rahmen in Kurzschreibweise, der Breite, Farbe und Stil in einer einzigen Eigenschaft festlegt.
borderColor	"subdued" | "base" | "strong"	Die Farbe des Rahmens aus der Farbskala des Designsystems. Wenn gesetzt, überschreibt sie den in der Eigenschaft border angegebenen Farbwert. subdued, base oder strong wählen, je nach gewünschter visueller Betonung.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	Die Abrundung der Ecken des Elements anhand der Radius-Skala des Designsystems. Unterstützt die 1-bis-4-Werte-Syntax, um für jede Ecke unterschiedliche Radien festzulegen. Verwenden Sie dies für abgerundete Ecken oder vollständig abgerundete Elemente.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	Der visuelle Stil des Rahmens an allen Seiten, etwa durchgezogen, gestrichelt oder gepunktet. Wenn gesetzt, überschreibt dies den in der Eigenschaft border angegebenen Stilwert. Unterstützt die 1-bis-4-Werte-Syntax, um für jede Seite unterschiedliche Stile festzulegen.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	Die Stärke des Rahmens an allen Seiten. Wenn gesetzt, überschreibt dies den in der Eigenschaft border angegebenen Breitenwert. Unterstützt die 1-bis-4-Werte-Syntax, um für jede Seite unterschiedliche Breiten festzulegen.
columnGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Passt den Abstand zwischen Elementen in der Inline-Achse an. Überschreibt den Spaltenwert von gap. Akzeptiert: - Einen einzelnen SpacingKeyword-Wert, etwa large-100 - Einen responsiven Wert als String mit dem unterstützten SpacingKeyword als Query-Wert
direction	"block" | "inline"	Die Richtung, in der die Kindelemente des Stacks innerhalb des Stacks angeordnet werden. Akzeptiert: - Einen einzelnen Wert, entweder inline oder block - Einen responsiven Wert als String mit den unterstützten Richtungswerten als Query-Wert
display	"auto" | "none"	Der äußere display-Typ der Komponente. Der äußere Typ bestimmt die Teilnahme einer Komponente am Flow-Layout. - auto der Anfangswert der Komponente. Der tatsächliche Wert hängt von der Komponente und dem Kontext ab. - none blendet die Komponente aus und entfernt sie aus dem Accessibility Tree, sodass sie für Screenreader unsichtbar ist.
gap	MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>	Passt den Abstand zwischen Elementen an. Akzeptiert: - Einen einzelnen SpacingKeyword-Wert für beide Achsen, etwa large-100 - Ein Wertepaar, etwa large-100 large-500, um Inline- bzw. Blockachse festzulegen - Einen responsiven Wert als String mit dem unterstützten SpacingKeyword als Query-Wert
inlineSize	"auto" | "0"	Die Breite bei horizontalen Schreibrichtungen bzw. die Höhe bei vertikalen Schreibrichtungen. Verwenden Sie dies für flussrelative Größen, die sich an die Textrichtung anpassen. Weitere Informationen zu inline-size.
justifyContent	"normal" | "stretch" | "center" | "start" | "end" | "unsafe center" | "unsafe start" | "unsafe end" … (6 more)	Steuert die Verteilung der Kindelemente entlang der Inline-Achse (horizontal bei horizontalen Schreibrichtungen). Damit werden Elemente entlang der Hauptachse des Stacks positioniert – horizontal bei Inline-Stacks oder vertikal bei Block-Stacks, wenn sie auf mehrere Zeilen umbrechen.
maxBlockSize	"none" | "0"	Die maximale Höhe bei horizontalen Schreibrichtungen bzw. die maximale Breite bei vertikalen Schreibrichtungen. Verhindert, dass das Element über diese Größe hinauswächst. Weitere Informationen zu max-block-size.
maxInlineSize	"none" | "0"	Die maximale Breite bei horizontalen Schreibrichtungen bzw. die maximale Höhe bei vertikalen Schreibrichtungen. Verhindert, dass das Element über diese Größe hinauswächst. Weitere Informationen zu max-inline-size.
minBlockSize	"0"	Die minimale Höhe bei horizontalen Schreibrichtungen bzw. die minimale Breite bei vertikalen Schreibrichtungen. Verhindert, dass das Element unter diese Größe schrumpft. Weitere Informationen zu min-block-size.
minInlineSize	"0"	Die minimale Breite bei horizontalen Schreibrichtungen bzw. die minimale Höhe bei vertikalen Schreibrichtungen. Verhindert, dass das Element unter diese Größe schrumpft. Weitere Informationen zu min-inline-size.
overflow	"visible" | "hidden"	Legt das Overflow-Verhalten des Elements fest. - hidden: Schneidet den Inhalt ab, wenn er größer als der Container des Elements ist. Das Element ist nicht scrollbar, und Nutzer können den abgeschnittenen Inhalt weder durch Ziehen noch mit dem Mausrad erreichen. - visible: Inhalt, der über den Container des Elements hinausragt, ist sichtbar.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	Das Padding an allen Kanten der Komponente. Unterstützt die 1-bis-4-Werte-Syntax mit flussrelativen Werten: - 1 Wert gilt für alle Seiten - 2 Werte gelten für block (oben/unten) und inline (links/rechts) - 3 Werte gelten für block-start (oben), inline (links/rechts) und block-end (unten) - 4 Werte gelten für block-start (oben), inline-end (rechts), block-end (unten) und inline-start (links) Beispiele:* base, large none, base large-100 base small Verwenden Sie auto, um das Padding vom nächstgelegenen Container mit entferntem Padding zu übernehmen. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	Der Innenabstand in Blockrichtung (oben und unten bei horizontalen Schreibrichtungen). Akzeptiert einen einzelnen Wert für beide Seiten oder zwei durch Leerzeichen getrennte Werte für Block-Start und Block-Ende. Beispiel:* large none wendet large oben und none unten an. Überschreibt den Blockwert von padding. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Der Innenabstand am Block-Ende (unten bei horizontalen Schreibrichtungen). Überschreibt den Block-End-Wert von paddingBlock. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Der Innenabstand am Block-Start (oben bei horizontalen Schreibrichtungen). Überschreibt den Block-Start-Wert von paddingBlock. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	Das Padding in Inline-Richtung (links und rechts bei horizontalen Schreibrichtungen). Akzeptiert einen einzelnen Wert für beide Seiten oder zwei durch Leerzeichen getrennte Werte für inline-start und inline-end. Beispiel:* large none wendet large links und none rechts an. Überschreibt den Inline-Wert aus padding. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Das Padding am Inline-Ende (rechts bei LTR-Schreibrichtung, links bei RTL). Überschreibt den inline-end-Wert aus paddingInline. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Das Padding am Inline-Anfang (links bei LTR-Schreibrichtung, rechts bei RTL). Überschreibt den inline-start-Wert aus paddingInline. Akzeptiert auch einen responsiven Wert als String mit dem unterstützten PaddingKeyword als Query-Wert.
rowGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Passt den Abstand zwischen Elementen in der Blockachse an. Überschreibt den Zeilenwert von gap. Akzeptiert: - Einen einzelnen SpacingKeyword-Wert, etwa large-100 - Einen responsiven Wert als String mit dem unterstützten SpacingKeyword als Query-Wert

Einige Typspalten oben wurden zur besseren Lesbarkeit gekürzt; die vollständigen Unions finden sich in den generierten TypeScript-Typen der Bibliothek (src/lib/generated/types.ts).

Slots

Slot	Beschreibung
default	Die Kindelemente innerhalb der Stack-Komponente, vertikal oder horizontal mit einheitlichen Abständen angeordnet.