SStack <s-stack>

Dispose ses enfants en ligne ou en colonne avec un espacement et un alignement cohérents. SStack est le wrapper Vue 3 typé du web component <s-stack> de Shopify Polaris.

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

Bonnes pratiques

• Faites refléter les relations par l'espacement. Un petit gap indique que des éléments vont ensemble, tandis qu'un plus grand sépare des groupes distincts. Choisissez l'espacement qui correspond à la hiérarchie de votre contenu.
• Attendez-vous à ce que les stacks en ligne passent à la ligne. Avec direction="inline", les éléments passent à la ligne suivante lorsqu'ils manquent de place. C'est généralement ce que vous voulez, mais si vous avez besoin d'un contrôle précis des retours à la ligne ou de plusieurs rangées, optez pour une autre approche de mise en page.
• Définissez l'alignement délibérément. L'alignement par défaut convient à la plupart des mises en page. Ajustez alignItems ou justifyContent lorsque les éléments diffèrent en taille ou ont besoin d'un positionnement précis.

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

Consultez les bonnes pratiques de Shopify pour <s-stack> (en anglais) pour l'ensemble des recommandations.

Exemple

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	Type	Description
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu de l'élément. Lorsqu'il est défini, il est annoncé aux utilisateurs de technologies d'assistance et leur apporte davantage de contexte. Ne l'utilisez que lorsque le contenu de l'élément n'apporte pas assez de contexte aux utilisateurs de technologies d'assistance.
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	Définit la signification sémantique du contenu du composant. Lorsqu'il est défini, le rôle est utilisé par les technologies d'assistance pour aider les utilisateurs à naviguer dans la page.
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é.
alignContent	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (9 more)	Contrôle la répartition des lignes selon l'axe block lorsque le contenu passe sur plusieurs lignes. Cette propriété n'affecte que les piles dont le contenu passe à la ligne. Pour les piles sur une seule ligne, utilisez plutôt alignItems.
alignItems	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (6 more)	Contrôle l'alignement des enfants selon l'axe block (verticalement dans les modes d'écriture horizontaux). Utilisez-le pour aligner les éléments perpendiculairement à la direction de la pile : verticalement pour les piles inline, horizontalement pour les piles block.
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é.
columnGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Ajuste l'espacement entre les éléments dans l'axe inline. Remplace la valeur de colonne de gap. Accepte : - Une seule valeur SpacingKeyword, comme large-100 - Une chaîne de valeur responsive avec le SpacingKeyword pris en charge comme valeur de requête
direction	"block" | "inline"	La direction dans laquelle les enfants du stack sont placés. Accepte : - Une valeur unique, inline ou block - Une chaîne de valeur responsive avec les valeurs de direction prises en charge comme valeur de requête
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.
gap	MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>	Ajuste l'espacement entre les éléments. Accepte : - Une seule valeur SpacingKeyword appliquée aux deux axes, comme large-100 - Une paire de valeurs, comme large-100 large-500, pour définir respectivement les axes inline et block - Une chaîne de valeur responsive avec le SpacingKeyword pris en charge comme valeur de requête
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.
justifyContent	"normal" | "stretch" | "center" | "start" | "end" | "unsafe center" | "unsafe start" | "unsafe end" … (6 more)	Contrôle la répartition des enfants selon l'axe inline (horizontalement dans les modes d'écriture horizontaux). Utilisez-le pour positionner les éléments le long de l'axe principal de la pile : horizontalement pour les piles inline, verticalement pour les piles block lorsqu'elles passent sur plusieurs lignes.
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	"visible" | "hidden"	Définit le comportement de débordement de l'élément. - hidden : rogne le contenu lorsqu'il est plus grand que le conteneur de l'élément. L'élément ne peut pas défiler et les utilisateurs ne peuvent pas accéder au contenu rogné en le faisant glisser ou avec la molette de la souris. - visible : le contenu qui dépasse du conteneur de l'élément reste visible.
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.
rowGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Ajuste l'espacement entre les éléments dans l'axe block. Remplace la valeur de ligne de gap. Accepte : - Une seule valeur SpacingKeyword, comme large-100 - Une chaîne de valeur responsive avec le SpacingKeyword pris en charge comme valeur de requête

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

Slots

Slot	Description
default	Les éléments enfants affichés dans le composant pile, disposés verticalement ou horizontalement avec un espacement homogène.