SGrid `<s-grid>`

Ein CSS-Grid-Container, der Inhalte in Zeilen und Spalten anordnet. SGrid ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-grid>.

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

Best Practices

Kleinere Bildschirme einplanen. Ein Grid, das auf dem Desktop funktioniert, kann mobil zerfallen. Legen Sie fest, wie es sich bei geringerer Breite neu umbricht oder anordnet, statt ein einziges Layout festzuschreiben.
Einheitliche Abstände verwenden. Gleichmäßige Abstände zwischen Elementen geben dem Layout einen ruhigen Rhythmus und erleichtern das Überfliegen. Mischen Sie daher keine verschiedenen Abstandsansätze innerhalb eines Grids.
Inhalte einplanen, die nicht passen. Zellen haben feste Maße, Inhalte aber unterschiedliche Längen. Entscheiden Sie im Voraus, ob zu langer oder zu breiter Inhalt umbrechen, abgeschnitten werden oder scrollen soll.
Eine einfachere Komponente verwenden, wenn sie genügt. SGrid ist leistungsfähig, bringt aber Komplexität mit. Prüfen Sie, ob eine einfachere Layout-Komponente reicht, und nutzen Sie das Grid für Fälle, die seine Möglichkeiten wirklich brauchen.

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

Beispiel

Column 1

Column 2

Column 1

Column 2

vue

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

<template>
  <!-- SGrid controls the track layout (columns/rows/gap); each SGridItem is a cell. -->
  <SGrid gridTemplateColumns="1fr 1fr" gap="base">
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
  </SGrid>
</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)`	Richtet das Grid entlang der Blockachse aus. Überschreibt den Blockwert von `placeContent`.
`alignItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Richtet die Grid-Elemente entlang der Blockachse aus.
`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
`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
`gridTemplateColumns`	`string`	Die Spalten im Grid und ihre Größen. Akzeptiert: - Track-Größenwerte, etwa `1fr auto` - Einen responsiven Wert als String mit den unterstützten Track-Größenwerten als Query-Wert
`gridTemplateRows`	`string`	Die Zeilen im Grid und ihre Größen. Akzeptiert: - Track-Größenwerte, etwa `1fr auto` - Einen responsiven Wert als String mit den unterstützten Track-Größenwerten 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)`	Richtet das Grid entlang der Inline-Achse aus. Überschreibt den Inline-Wert von `placeContent`.
`justifyItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Richtet die Grid-Elemente entlang der Inline-Achse aus.
`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.
`placeContent`	`"normal normal" \| "normal stretch" \| "normal center" \| "normal start" \| "normal end" \| "normal unsafe center" \| "normal unsafe start" \| "normal unsafe end" … (3 more)`	Eine Kurzschreibweise für `justify-content` und `align-content`.
`placeItems`	`AlignItemsKeyword \| "normal normal" \| "normal stretch" \| "normal baseline" \| "normal first baseline" \| "normal last baseline" \| "normal center" \| "normal start" … (2 more)`	Eine Kurzschreibweise für `justify-items` und `align-items`.
`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 Grid-Komponente, angeordnet in einem flexiblen Grid-Layout mit konfigurierbaren Spalten, Zeilen und Abständen.

SGrid <s-grid> ​

Best Practices ​

Beispiel ​

Props ​

Slots ​

SGrid `<s-grid>`

Best Practices

Beispiel

Props

Slots