SScrollBox <s-scroll-box>
Un conteneur qui fait défiler son contenu lorsqu'il déborde. SScrollBox est le wrapper Vue 3 typé du web component <s-scroll-box> de Shopify Polaris.
ts
import { SScrollBox } from 'polaris-vue-elements'Exemple
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 | Type | Description |
|---|---|---|
accessibilityLabel | string | Un libellé décrivant le conteneur défilant pour les technologies d'assistance. |
accessibilityRole | "generic" | "region" | Définit la signification sémantique du contenu du composant. |
accessibilityVisibility | "visible" | "hidden" | "exclusive" | Modifie la visibilité de l'élément. - visible : l'élément est visible par tous les utilisateurs. - hidden : l'élément est retiré de l'arbre d'accessibilité mais reste visible. - exclusive : l'élément est masqué visuellement mais reste dans l'arbre d'accessibilité. |
background | "subdued" | "base" | "strong" | "transparent" | La couleur d'arrière-plan du composant. |
blockSize | "auto" | "0" | La taille verticale de l'élément dans les mises en page standard (la hauteur dans les modes d'écriture de gauche à droite ou de droite à gauche). La taille block s'adapte au sens d'écriture : dans les mises en page horizontales, elle contrôle la hauteur ; dans les mises en page verticales, la largeur. Cela garantit un comportement cohérent quel que soit le sens du texte. En savoir plus sur block-size. |
border | BorderShorthand | Une bordure définie avec une syntaxe raccourcie pour indiquer la largeur, la couleur et le style en une seule propriété. |
borderColor | "subdued" | "base" | "strong" | La couleur de la bordure, issue de l'échelle de couleurs du design system. Lorsqu'elle est définie, elle remplace la couleur indiquée dans la propriété border. Choisissez subdued, base ou strong selon l'emphase visuelle souhaitée. |
borderRadius | MaybeAllValuesShorthandProperty<BoxBorderRadii> | L'arrondi des coins de l'élément, selon l'échelle de rayons du design system. Prend en charge la syntaxe à 1 à 4 valeurs pour définir des rayons différents par coin. Utilisez-la pour créer des coins arrondis ou des éléments entièrement arrondis. |
borderStyle | "" | MaybeAllValuesShorthandProperty<BoxBorderStyles> | Le style visuel de la bordure sur tous les côtés, par exemple pleine, tiretée ou pointillée. Lorsqu'il est défini, il remplace le style indiqué dans la propriété border. Prend en charge la syntaxe à 1 à 4 valeurs pour définir des styles différents par côté. |
borderWidth | "" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none"> | L'épaisseur de la bordure sur tous les côtés. Lorsqu'elle est définie, elle remplace la largeur indiquée dans la propriété border. Prend en charge la syntaxe à 1 à 4 valeurs pour définir des largeurs différentes par côté. |
display | "auto" | "none" | Le type d'affichage externe du composant. Le type externe définit la participation du composant à la mise en page en flux. - auto la valeur initiale du composant. La valeur réelle dépend du composant et du contexte. - none masque le composant et le retire de l'arbre d'accessibilité, le rendant invisible pour les lecteurs d'écran. |
inlineSize | "auto" | "0" | La largeur dans les modes d'écriture horizontaux, ou la hauteur dans les modes d'écriture verticaux. Utilisez-la pour un dimensionnement relatif au flux qui s'adapte au sens du texte. En savoir plus sur inline-size. |
maxBlockSize | "none" | "0" | La hauteur maximale dans les modes d'écriture horizontaux, ou la largeur maximale dans les modes d'écriture verticaux. Empêche l'élément de dépasser cette taille. En savoir plus sur max-block-size. |
maxInlineSize | "none" | "0" | La largeur maximale dans les modes d'écriture horizontaux, ou la hauteur maximale dans les modes d'écriture verticaux. Empêche l'élément de dépasser cette taille. En savoir plus sur max-inline-size. |
minBlockSize | "0" | La hauteur minimale dans les modes d'écriture horizontaux, ou la largeur minimale dans les modes d'écriture verticaux. Empêche l'élément de rétrécir en dessous de cette taille. En savoir plus sur min-block-size. |
minInlineSize | "0" | La largeur minimale dans les modes d'écriture horizontaux, ou la hauteur minimale dans les modes d'écriture verticaux. Empêche l'élément de rétrécir en dessous de cette taille. En savoir plus sur min-inline-size. |
overflow | "auto" | "hidden" | "auto auto" | "auto hidden" | "hidden auto" | "hidden hidden" | Définit le comportement de débordement de l'élément. |
padding | MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>> | Le padding appliqué à tous les bords du composant. Prend en charge la syntaxe à 1 à 4 valeurs avec des valeurs relatives au flux : - 1 valeur s'applique à tous les côtés - 2 valeurs s'appliquent à block (haut/bas) et inline (gauche/droite) - 3 valeurs s'appliquent à block-start (haut), inline (gauche/droite) et block-end (bas) - 4 valeurs s'appliquent à block-start (haut), inline-end (droite), block-end (bas) et inline-start (gauche) Exemples :* base, large none, base large-100 base small Utilisez auto pour hériter du padding du conteneur le plus proche dont le padding a été supprimé. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête. |
paddingBlock | MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>> | Le padding dans la direction block (haut et bas dans les modes d'écriture horizontaux). Accepte une seule valeur pour les deux côtés, ou deux valeurs séparées par un espace pour block-start et block-end. Exemple :* large none applique large en haut et none en bas. Remplace la valeur block de padding. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête. |
paddingBlockEnd | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more) | Le padding block-end (bas dans les modes d'écriture horizontaux). Remplace la valeur block-end de paddingBlock. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête. |
paddingBlockStart | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more) | Le padding block-start (haut dans les modes d'écriture horizontaux). Remplace la valeur block-start de paddingBlock. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête. |
paddingInline | MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>> | Le padding dans la direction inline (gauche et droite dans les modes d'écriture horizontaux). Accepte une valeur unique pour les deux côtés, ou deux valeurs séparées par un espace pour inline-start et inline-end. Exemple :* large none applique large à gauche et none à droite. Remplace la valeur inline de padding. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête. |
paddingInlineEnd | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more) | Le padding inline-end (à droite en écriture LTR, à gauche en RTL). Remplace la valeur inline-end de paddingInline. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête. |
paddingInlineStart | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more) | Le padding inline-start (à gauche en écriture LTR, à droite en RTL). Remplace la valeur inline-start de paddingInline. Accepte aussi une chaîne de valeur responsive avec le PaddingKeyword pris en charge comme valeur de requête. |
scrollMargin | "0" | "0 0" | "0 0 0" | "0 0 0 0" | Marge de défilement de l'élément (syntaxe raccourcie de type CSS, de 1 à 4 valeurs). |
scrollPadding | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more) | Décalage des points d'alignement du scroll snap. |
snapType | "none" | "mandatory" | "proximity" | Contrôle le comportement du scroll snap. |
Certaines colonnes de type ci-dessus sont tronquées pour plus de lisibilité ; l'union complète est disponible dans les types TypeScript générés de la bibliothèque (
src/lib/generated/types.ts).
Events
| Event | Type |
|---|---|
scroll | CustomEvent |
scrolltoedge | CustomEvent |
Écoutez-les avec des listeners de la forme @scroll sur <SScrollBox>.
Slots
| Slot | Description |
|---|---|
default | Le contenu de la ScrollBox. |