SText <s-text>

Du texte en ligne avec un style de ton, de graisse et d'emphase. SText est le wrapper Vue 3 typé du web component <s-text> de Shopify Polaris.

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

Bonnes pratiques

• Choisissez un type sémantique. Choisissez "strong" pour mettre en valeur des mots ou expressions clés, "address" pour une adresse postale ou e-mail, et "redundant" pour un texte qui donne du contexte aux utilisateurs de lecteur d'écran lorsque le même contenu figure déjà à l'écran. Le bon type permet aux technologies d'assistance de restituer le sens du texte.
• Mettez en valeur avec parcimonie. Appliquez type="strong" à des mots ou des nombres clés au sein d'une phrase, pas à des phrases entières ; trop d'emphase perd son effet et rend le texte plus difficile à parcourir.
• Utilisez le ton pour un statut en ligne. Des tons comme "critical", "success" ou "caution" attirent l'attention sur un statut, mais associez-les à une formulation claire plutôt que de laisser la couleur porter le message.
• N'atténuez pas ce qui compte. color="subdued" convient aux horodatages et aux métadonnées, mais évitez-le pour les informations critiques que les marchands doivent lire.

<SParagraph>
  Order shipped to <SText type="address">150 Elgin St, Ottawa</SText>.
  <SText type="strong">Payment pending.</SText>
</SParagraph>

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

Exemple

Default textStrong textSubdued textSuccess toneCritical toneTabular numbers: 10 200 3000

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

<template>
  <SText>Default text</SText>
  <SText type="strong">Strong text</SText>
  <SText color="subdued">Subdued text</SText>
  <SText tone="success">Success tone</SText>
  <SText tone="critical">Critical tone</SText>
  <SText fontVariantNumeric="tabular-nums">Tabular numbers: 10 200 3000</SText>
</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 texte. 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 texte.
interestFor	string	ID d'un composant qui doit réagir à l'intérêt (p. ex. survol et focus) porté à ce composant.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Le ton sémantique appliqué au texte, 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). - auto : déterminé automatiquement selon le contexte. - neutral : information générale sans intention particulière (gris). - caution : avis nécessitant de l'attention (jaune).
type	"strong" | "address" | "redundant" | "generic"	Le type sémantique et le traitement stylistique du contenu textuel. Les autres propriétés de présentation du texte remplacent le style par défaut. - strong : met le texte en valeur avec une forte importance, généralement affiché en gras. - generic : texte standard sans signification sémantique ni style particulier. - address : marque le texte comme une information de contact, comme une adresse postale ou e-mail. - redundant : indique que le texte est une information redondante ou dupliquée, destinée au contexte des lecteurs d'écran.

Slots

Slot	Description
default	Le contenu textuel affiché dans le composant text, qui applique la signification sémantique et le style correspondant au type de texte indiqué.