SGrid `<s-grid>`

Un conteneur CSS grid pour disposer le contenu en lignes et en colonnes. SGrid est le wrapper Vue 3 typé du web component <s-grid> de Shopify Polaris.

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

Bonnes pratiques

Pensez aux petits écrans. Une grille qui fonctionne sur ordinateur peut se désagréger sur mobile. Décidez comment elle doit se réorganiser aux largeurs plus étroites plutôt que de figer une seule disposition.
Utilisez un espacement uniforme. Des écarts réguliers entre les éléments donnent à la mise en page un rythme stable et la rendent plus facile à parcourir : évitez de mélanger plusieurs approches d'espacement dans une même grille.
Prévoyez le contenu qui ne rentre pas. Les cellules ont des dimensions définies, mais la longueur du contenu varie. Décidez à l'avance si un contenu trop long ou trop large doit passer à la ligne, être tronqué ou défiler.
Utilisez un composant plus simple lorsqu'il suffit. SGrid est puissant mais ajoute de la complexité : vérifiez si un composant de mise en page plus simple fait l'affaire et réservez la grille aux cas qui ont besoin de ce qu'elle offre.

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

Exemple

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	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)`	Aligne la grille selon l'axe block. Remplace la valeur block de `placeContent`.
`alignItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Aligne les éléments de la grille selon l'axe 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
`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
`gridTemplateColumns`	`string`	Les colonnes de la grille et leurs tailles. Accepte : - Des valeurs de dimensionnement des pistes, comme `1fr auto` - Une chaîne de valeur responsive avec les valeurs de dimensionnement des pistes prises en charge comme valeur de requête
`gridTemplateRows`	`string`	Les lignes de la grille et leurs tailles. Accepte : - Des valeurs de dimensionnement de pistes, comme `1fr auto` - Une chaîne de valeur responsive avec les valeurs de dimensionnement de pistes prises 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)`	Aligne la grille selon l'axe inline. Remplace la valeur inline de `placeContent`.
`justifyItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	Aligne les éléments de la grille selon l'axe inline.
`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.
`placeContent`	`"normal normal" \| "normal stretch" \| "normal center" \| "normal start" \| "normal end" \| "normal unsafe center" \| "normal unsafe start" \| "normal unsafe end" … (3 more)`	Une propriété raccourcie pour `justify-content` et `align-content`.
`placeItems`	`AlignItemsKeyword \| "normal normal" \| "normal stretch" \| "normal baseline" \| "normal first baseline" \| "normal last baseline" \| "normal center" \| "normal start" … (2 more)`	Une propriété raccourcie pour `justify-items` et `align-items`.
`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 grille, disposés selon une grille flexible avec des colonnes, des lignes et un espacement configurables.

SGrid <s-grid> ​

Bonnes pratiques ​

Exemple ​

Props ​

Slots ​

SGrid `<s-grid>`

Bonnes pratiques

Exemple

Props

Slots