SText <s-text>

Texto en línea con estilos de tono, grosor y énfasis. SText es el wrapper de Vue 3 tipado del web component <s-text> de Shopify Polaris.

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

Buenas prácticas

• Elige un type semántico. Elige "strong" para destacar palabras o frases clave, "address" para una dirección postal o de correo electrónico, y "redundant" para texto que da contexto a los usuarios de lectores de pantalla cuando el mismo contenido ya aparece en pantalla. Elegir el tipo correcto permite que las tecnologías de asistencia transmitan lo que significa el texto.
• Enfatiza con moderación. Aplica type="strong" a palabras o números clave dentro de una frase, no a frases enteras; el exceso de énfasis pierde su efecto y hace que el texto sea más difícil de revisar.
• Usa el tono para estados en línea. Tonos como "critical", "success" o "caution" llaman la atención sobre un estado, pero acompáñalos de una redacción clara en lugar de dejar que el color transmita el mensaje.
• No atenúes lo importante. color="subdued" es adecuado para marcas de tiempo y metadatos, pero evítalo para información crítica que los comerciantes deben leer.

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

Consulta las buenas prácticas de Shopify para <s-text> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Tipo	Descripción
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Cambia la visibilidad del elemento. - visible: el elemento es visible para todos los usuarios. - hidden: el elemento se elimina del árbol de accesibilidad, pero sigue siendo visible. - exclusive: el elemento se oculta visualmente, pero permanece en el árbol de accesibilidad.
color	"subdued" | "base"	Modifica el color para que sea más o menos intenso.
dir	"auto" | "ltr" | "rtl"	Indica la direccionalidad del texto del elemento. - ltr: idiomas que se escriben de izquierda a derecha (p. ej., inglés) - rtl: idiomas que se escriben de derecha a izquierda (p. ej., árabe) - auto: el agente de usuario determina la dirección según el contenido - '': la dirección se hereda de los elementos padre (equivale a no establecer el atributo)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Tamaño de fuente del texto. Los valores con nombre también aplican su altura de línea y su espaciado entre letras correspondientes.
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	Define las propiedades numéricas de la fuente.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Grosor de fuente del texto.
interestFor	string	ID de un componente que debe responder al interés (p. ej., al pasar el cursor por encima y al enfocar) en este componente.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	El tono semántico que se aplica al texto y que cambia su color para transmitir significado. - info: contenido informativo o consejos útiles (azul). - success: resultados positivos o estados de éxito (verde). - warning: advertencias importantes sobre posibles problemas (naranja). - critical: problemas urgentes o acciones destructivas (rojo). - auto: se determina automáticamente según el contexto. - neutral: información general sin una intención específica (gris). - caution: avisos que requieren atención (amarillo).
type	"strong" | "address" | "redundant" | "generic"	El tipo semántico y el tratamiento de estilo del contenido de texto. Otras propiedades de presentación del texto anulan el estilo predeterminado. - strong: enfatiza el texto con gran importancia; normalmente se muestra en negrita. - generic: texto estándar sin significado semántico ni estilo especial. - address: marca el texto como información de contacto, como una dirección física o de correo electrónico. - redundant: indica que el texto es información redundante o duplicada para el contexto del lector de pantalla.

Slots

Slot	Descripción
default	El contenido de texto que se muestra dentro del componente text, que aplica el significado semántico y el estilo adecuados al tipo de texto especificado.