SScrollBox `<s-scroll-box>`

Ein Container, der seinen Inhalt scrollt, wenn dieser überläuft. SScrollBox ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-scroll-box>.

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

Beispiel

Scrollable row 1

Scrollable row 2

Scrollable row 3

Scrollable row 4

Scrollable row 5

Scrollable row 6

Scrollable row 7

Scrollable row 8

vue

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

<template>
  <!-- maxBlockSize only accepts the "none"/"0" keywords, so an arbitrary pixel cap is
       set as a plain style attribute (it passes through untyped, see the quirks guide). -->
  <SScrollBox
    style="max-height: 160px"
    overflow="auto"
    border="base"
    borderRadius="200"
    padding="base"
  >
    <SBox
      v-for="n in 8"
      :key="n"
      padding="small"
      paddingBlockEnd="small"
      borderColor="subdued"
      borderWidth="small"
      borderStyle="solid"
    >
      <SText>Scrollable row {{ n }}</SText>
    </SBox>
  </SScrollBox>
</template>

Props

Prop	Typ	Beschreibung
`accessibilityLabel`	`string`	Ein Label, das den Scroll-Container für assistive Technologien beschreibt.
`accessibilityRole`	`"generic" \| "region"`	Legt die semantische Bedeutung des Inhalts der Komponente fest.
`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.
`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`	`"auto" \| "hidden" \| "auto auto" \| "auto hidden" \| "hidden auto" \| "hidden hidden"`	Legt das Overflow-Verhalten des Elements fest.
`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.
`scrollMargin`	`"0" \| "0 0" \| "0 0 0" \| "0 0 0 0"`	Scroll-Margin für das Element (CSS-ähnliche Kurzschreibweise mit 1 bis 4 Werten).
`scrollPadding`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	Versatz für die Ausrichtungspunkte des Scroll-Snappings.
`snapType`	`"none" \| "mandatory" \| "proximity"`	Steuert das Scroll-Snap-Verhalten.

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

Events

Event	Typ
`scroll`	`CustomEvent`
`scrolltoedge`	`CustomEvent`

Auf diese Events lauschen Sie mit Listenern im Stil von @scroll auf <SScrollBox>.

Slots

Slot	Beschreibung
`default`	Der Inhalt der ScrollBox.

SScrollBox <s-scroll-box> ​

Beispiel ​

Props ​

Events ​

Slots ​

SScrollBox `<s-scroll-box>`

Beispiel

Props

Events

Slots