SDivider <s-divider>

Une ligne horizontale ou verticale qui sépare des contenus. SDivider est le wrapper Vue 3 typé du web component <s-divider> de Shopify Polaris.

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

Bonnes pratiques

• Ne séparez que des contenus réellement différents. Les séparateurs ont leur place entre des sections clairement distinctes. Trop de séparateurs donnent une interface encombrée et morcelée : vérifiez si un simple espace regrouperait le contenu aussi bien.
• Proportionnez le poids à la rupture. Faites refléter par la visibilité du séparateur l'importance de la séparation : une rupture majeure entre sections peut prendre color="strong", tandis qu'un regroupement mineur demande une ligne plus discrète ou simplement de l'espace.
• Suivez le sens de la mise en page. Définissez direction pour que la ligne coupe le flux du contenu qu'elle sépare, entre des éléments empilés verticalement ou disposés côte à côte.
• Essayez d'abord l'espacement. Les props d'espacement de vos composants de mise en page regroupent souvent le contenu plus proprement qu'une ligne. Ajoutez un séparateur pour clarifier, pas pour remplacer un espacement bien pensé.

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

Exemple

Content above the divider.Content below the divider.A stronger divider variant.

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

<template>
  <SParagraph>Content above the divider.</SParagraph>
  <SDivider />
  <SParagraph>Content below the divider.</SParagraph>
  <SDivider color="strong" />
  <SParagraph color="subdued">A stronger divider variant.</SParagraph>
</template>

Props

Prop	Type	Description
color	"base" | "strong"	La proéminence visuelle du séparateur. - base : séparateur standard pour la plupart des séparations (par défaut) - strong : séparateur plus marqué pour les grandes ruptures de section
direction	"block" | "inline"	L'orientation du séparateur, selon les propriétés logiques. - inline : séparateur horizontal pour séparer du contenu empilé verticalement - block : séparateur vertical pour séparer du contenu disposé horizontalement