SSection <s-section>

Regroupe des contenus liés, avec un titre, un sous-titre et des actions facultatifs. SSection est le wrapper Vue 3 typé du web component <s-section> de Shopify Polaris.

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

Bonnes pratiques

• Regroupez ce qui va ensemble. Donnez à chaque section un rôle unique et cohérent, qu'il s'agisse d'informations liées ou de contrôles liés ; elle sert alors de conteneur visuel et donne du sens à la structure de la page.
• Rédigez des titres descriptifs. Les marchands parcourent le heading pour s'orienter : indiquez ce que contient la section plutôt que de vous rabattre sur un titre générique.
• N'imbriquez qu'autant que le contenu l'exige. Une section imbriquée influe sur la hiérarchie des titres et le plan de la page plutôt que sur son apparence. Limitez-vous à deux ou trois niveaux au maximum, et n'imbriquez que lorsque la structure supplémentaire clarifie le contenu.
• Supprimez le padding lorsque le contenu doit aller d'un bord à l'autre. Utilisez padding="none" pour des éléments comme les tableaux ou les images qui doivent remplir la section, puis vérifiez que le contenu intérieur conserve un espacement suffisant.
• Ajoutez un accessibilityLabel lorsque le titre ne suffit pas. Lorsque le titre affiché laisse le rôle de la section flou pour les utilisateurs de lecteur d'écran, donnez-leur un libellé qui apporte le contexte manquant.
• Choisissez le bon slot d'en-tête. Placez les détails qui complètent le titre lui-même, comme une infobulle ou un compteur, dans accessory. Placez les informations sur la section dans son ensemble, comme un badge de statut, dans supplemental. Les actions telles qu'un bouton ou un menu vont dans accessory, car supplemental ne les accepte pas.

<SSection heading="Products" padding="none">
  <STable>
    <!-- … -->
  </STable>
</SSection>

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

Exemple

123 Main Street, Ottawa, ON, CanadaDelivery instructions: leave at front door.

<script setup>
import { SSection, SParagraph, SDivider } from 'polaris-vue-elements'
</script>

<template>
  <SSection heading="Shipping address">
    <SParagraph>123 Main Street, Ottawa, ON, Canada</SParagraph>
    <SDivider />
    <SParagraph color="subdued">Delivery instructions: leave at front door.</SParagraph>
  </SSection>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu du composant pour les technologies d'assistance comme les lecteurs d'écran. Utilisez-le pour apporter un contexte supplémentaire lorsque le contenu visible seul ne suffit pas à exprimer clairement l'objectif du composant.
heading	string	Le texte du titre affiché en haut de la section. Ce titre donne un intitulé au contenu de la section et utilise automatiquement le niveau de titre sémantique approprié (h2, h3, h4) selon la profondeur d'imbrication, afin de préserver une structure de document correcte.
padding	"base" | "none"	Le padding appliqué à tous les bords du contenu de l'élément. - base : applique un padding adapté à l'élément. Notez que cela peut aboutir à aucun padding si c'est le bon choix de design dans un contexte donné. - none : supprime tout le padding du contenu de l'élément. Cela peut être utile lorsque des éléments de la section doivent s'étendre jusqu'au bord de la section, par exemple une image pleine largeur. Dans ce cas, utilisez s-box avec un padding 'base' pour rétablir le padding souhaité pour le reste du contenu. Le heading et les actions d'en-tête conservent leur padding ; ils peuvent donc être combinés avec none.
subheading	string	Texte d'appui qui développe le titre, affiché en dessous avec un style atténué. Ce n'est pas un titre : il n'ajoute aucune entrée au plan du document, ne modifie pas le niveau de titre des enfants de la section et n'est pas annoncé avec le titre. Placez ce qui distingue cette section d'une autre dans heading, car c'est ce qu'entend une personne qui navigue par titres.

Slots

Slot	Description
default	Le contenu affiché dans le composant section, qui regroupe des éléments liés en une unité logique avec un titre facultatif.
accessory	Informations contextuelles supplémentaires qui précisent le titre, affichées en ligne à côté du texte du titre. N'accepte que les éléments Badge, Icon, Button, Menu, Text, Avatar, Thumbnail et Tooltip. Text doit utiliser auto pour tone, fontSize et fontWeight ; Icon, Avatar et Thumbnail doivent utiliser size="base" ; Badge doit utiliser size="base" et color="base" ; Button doit utiliser inlineSize="auto". Un Tooltip ciblé par l'interestFor d'un élément accessoire peut être placé ici, à côté de celui-ci.
graphic	Un visuel décoratif qui renforce le titre, affiché avant celui-ci. Accepte une seule Icon avec une size égale à base, ou un Badge composé uniquement d'une icône (icon défini, sans contenu textuel) avec une size égale à large. Le titre identifie la section : ce contenu n'est donc pas annoncé par les technologies d'assistance, et il n'est pas affiché du tout lorsque la section n'a pas de heading.
primary-action	Le bouton ou lien d'action principale, représentant l'action principale ou la plus importante disponible dans ce contexte. Généralement affiché avec une plus forte visibilité que les actions secondaires afin d'établir une hiérarchie claire.
secondary-actions	Boutons d'action ou liens supplémentaires proposant des actions alternatives ou complémentaires. Visuellement atténués par rapport à l'action principale. Un ButtonGroup contenant une action et l'activateur à icône seule de son Menu s'affiche comme un groupe segmenté avec un activateur en chevron. Le groupe nécessite un accessibilityLabel et doit contenir exactement un Button avec du texte, suivi d'un Button sans texte doté d'un accessibilityLabel et d'un commandFor ouvrant un Menu, tous deux avec une variant égale à secondary ou auto.
supplemental	Statut ou métadonnées décrivant la section dans son ensemble plutôt que de préciser son titre, affichés à l'extrémité inline-end de l'en-tête, avant les éventuelles actions. Il ne s'agit pas d'une action. N'accepte que les éléments Badge, Avatar, Text, Icon, Thumbnail et Tooltip, avec les mêmes contraintes de props que accessory.