SBox <s-box>

Un conteneur générique pour gérer le padding, l'arrière-plan, la bordure, l'arrondi et les dimensions. SBox est le wrapper Vue 3 typé du web component <s-box> de Shopify Polaris.

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

Bonnes pratiques

• Utilisez-le comme conteneur générique. SBox gère l'espacement, les bordures et les arrière-plans pour regrouper du contenu. Lorsque vous avez besoin d'une disposition précise, en lignes ou en colonnes par exemple, utilisez plutôt SStack ou SGrid.
• Cherchez d'abord un composant plus parlant. Si un composant comme SSection ou SBanner décrit déjà la nature du contenu, préférez-le. Les composants dédiés expriment une intention plus claire et offrent une meilleure accessibilité.
• Pensez aux petits écrans. Une mise en page correcte sur ordinateur peut se casser sur mobile : ajustez l'espacement et la disposition avec des valeurs responsives plutôt que de figer des tailles fixes.
• Décrivez les régions et le contenu interactif. Lorsqu'une box délimite une région distincte ou contient du contenu interactif, définissez accessibilityRole et accessibilityLabel pour que les utilisateurs de lecteur d'écran puissent comprendre la structure et s'y déplacer.
• Limitez l'imbrication. Empiler des box dans des box complique le balisage et rend les styles difficiles à maintenir. Cherchez une structure plus simple ou un composant de mise en page mieux adapté.

<SBox accessibilityRole="region" accessibilityLabel="Shipping summary" padding="base" border="base">
  <!-- … -->
</SBox>

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

Exemple

background="subdued"background="strong"bordered box

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

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>background="subdued"</SText>
    </SBox>
    <SBox background="strong" padding="base" borderRadius="200">
      <SText>background="strong"</SText>
    </SBox>
    <SBox
      background="base"
      padding="base"
      borderRadius="200"
      borderWidth="small"
      borderColor="strong"
      borderStyle="solid"
    >
      <SText>bordered box</SText>
    </SBox>
  </div>
</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é.
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	"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.

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	Le contenu affiché dans le composant box, qui sert de conteneur flexible pour organiser et styliser d'autres composants.