SGridItem <s-grid-item>

Ein Kindelement eines Grids, das sich über mehrere Spalten oder Zeilen erstrecken kann. SGridItem ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-grid-item>.

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

Beispiel

Column 1Column 2Column 1Column 2

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

<template>
  <!-- Each SGridItem is one cell placed into the parent SGrid's tracks. -->
  <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.
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.
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.
gridColumn	"auto"	Die Anzahl der Spalten, über die sich das Element erstreckt. Weitere Informationen zur grid-column-Eigenschaft.
gridRow	"auto"	Die Anzahl der Zeilen, über die sich das Element erstreckt. Weitere Informationen zur grid-row-Eigenschaft.
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.
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.

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	Der Inhalt innerhalb der Grid-Item-Komponente, die eine einzelne Zelle im Grid-Layout darstellt und sich über mehrere Spalten oder Zeilen erstrecken kann.