SParagraph <s-paragraph>

Un bloc de texte courant. SParagraph est le wrapper Vue 3 typé du web component <s-paragraph> de Shopify Polaris.

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

Bonnes pratiques

• Gardez des paragraphes courts. Visez deux à quatre phrases en langage simple, sans jargon. Les marchands ont tendance à survoler : découpez les contenus longs en morceaux plus petits.
• Utilisez le ton pour signaler l'intention. tone="critical" convient aux erreurs, "caution" aux avertissements et "success" aux confirmations. Appuyez toujours la couleur par une formulation claire plutôt que de compter uniquement sur elle.
• Concevez pour l'accessibilité. Ajoutez un texte réservé aux lecteurs d'écran (accessibilityVisibility="exclusive") pour le contexte que les marchands voyants déduisent de la mise en page ou des icônes, et assurez-vous que le texte coloré conserve un contraste suffisant pour être lu.
• Limitez le nombre de lignes avec prudence. lineClamp est utile dans les espaces restreints comme les cartes ou les aperçus, mais ne laissez jamais la troncature masquer une information critique.

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

Exemple

Default paragraph text, used for the bulk of body copy.A subdued paragraph, useful for secondary or helper text.A critical paragraph, useful for inline error copy. A long paragraph that demonstrates lineClamp truncating its content after a fixed number of lines instead of wrapping indefinitely down the page.

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

<template>
  <SParagraph>Default paragraph text, used for the bulk of body copy.</SParagraph>
  <SParagraph color="subdued">A subdued paragraph, useful for secondary or helper text.</SParagraph>
  <SParagraph tone="critical">A critical paragraph, useful for inline error copy.</SParagraph>
  <SParagraph :lineClamp="2" style="max-width: 280px">
    A long paragraph that demonstrates lineClamp truncating its content after a fixed
    number of lines instead of wrapping indefinitely down the page.
  </SParagraph>
</template>

Props

Prop	Type	Description
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é.
color	"subdued" | "base"	Rend la couleur plus ou moins intense.
dir	"auto" | "ltr" | "rtl"	Indique la directionnalité du texte de l'élément. - ltr : langues écrites de gauche à droite (p. ex. l'anglais) - rtl : langues écrites de droite à gauche (p. ex. l'arabe) - auto : l'agent utilisateur détermine la direction selon le contenu - '' : la direction est héritée des éléments parents (équivaut à ne pas définir l'attribut)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Taille de police du paragraphe. Les valeurs nommées appliquent aussi la hauteur de ligne et l'espacement des lettres correspondants.
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	Définit les propriétés numériques de la police.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Graisse de police du paragraphe.
lineClamp	number	Tronque le contenu textuel au nombre de lignes indiqué.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Le ton sémantique appliqué au texte du paragraphe, qui modifie sa couleur pour transmettre un sens. - info : contenu informatif ou conseils utiles (bleu). - success : résultats positifs ou états de réussite (vert). - warning : avertissements importants sur des problèmes potentiels (orange). - critical : problèmes urgents ou actions destructrices (rouge). - caution : avis nécessitant de l'attention (jaune).

Slots

Slot	Description
default	Le texte du paragraphe affiché dans le composant paragraph, qui présente un bloc de texte cohérent avec le style approprié.