SParagraph <s-paragraph>

Un bloque de texto de cuerpo. SParagraph es el wrapper de Vue 3 tipado del web component <s-paragraph> de Shopify Polaris.

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

Buenas prácticas

• Escribe párrafos cortos. Apunta a entre dos y cuatro oraciones en lenguaje sencillo y sin jerga. Los comerciantes suelen leer en diagonal, así que divide el contenido largo en partes más pequeñas.
• Usa el tono para señalar la intención. tone="critical" es adecuado para errores, "caution" para advertencias y "success" para confirmaciones. Acompaña siempre el color con un texto claro en lugar de depender solo de él.
• Diseña pensando en la accesibilidad. Añade texto solo para lectores de pantalla (accessibilityVisibility="exclusive") para el contexto que los comerciantes videntes obtienen del diseño o de los iconos, y asegúrate de que el texto con tono mantenga suficiente contraste para leerse.
• Limita las líneas con cuidado. lineClamp ayuda en espacios reducidos como tarjetas o vistas previas, pero nunca dejes que el truncado oculte información crítica.

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

Ejemplo

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	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 párrafo. 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 párrafo.
lineClamp	number	Trunca el contenido de texto al número de líneas especificado.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	El tono semántico que se aplica al texto del párrafo 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). - caution: avisos que requieren atención (amarillo).

Slots

Slot	Descripción
default	El contenido de texto del párrafo que se muestra dentro del componente paragraph, que presenta un bloque de texto relacionado con el estilo adecuado.