SParagraph <s-paragraph>

Um bloco de texto de corpo. SParagraph é o wrapper de Vue 3 tipado do web component <s-paragraph> do Shopify Polaris.

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

Boas práticas

• Mantenha os parágrafos curtos. Procure usar de duas a quatro frases em linguagem simples, sem jargões. Os lojistas costumam ler por alto, então divida conteúdos longos em partes menores.
• Use tone para sinalizar a intenção. tone="critical" é adequado para erros, "caution" para avisos e "success" para confirmações. Sempre reforce a cor com um texto claro, em vez de depender só dela.
• Projete pensando em acessibilidade. Adicione texto exclusivo para leitores de tela (accessibilityVisibility="exclusive") para o contexto que lojistas que enxergam percebem pelo layout ou pelos ícones, e garanta que o texto com tom mantenha contraste suficiente para ser lido.
• Limite as linhas com cuidado. lineClamp ajuda em espaços apertados, como cards ou pré-visualizações, mas nunca deixe o truncamento esconder informações críticas.

Veja as boas práticas da Shopify para <s-paragraph> (em inglês) para todas as recomendações.

Exemplo

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	Descrição
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Altera a visibilidade do elemento. - visible: o elemento fica visível para todos os usuários. - hidden: o elemento é removido da árvore de acessibilidade, mas continua visível. - exclusive: o elemento fica visualmente oculto, mas permanece na árvore de acessibilidade.
color	"subdued" | "base"	Modifica a cor para que fique mais ou menos intensa.
dir	"auto" | "ltr" | "rtl"	Indica a direcionalidade do texto do elemento. - ltr: idiomas escritos da esquerda para a direita (por exemplo, inglês) - rtl: idiomas escritos da direita para a esquerda (por exemplo, árabe) - auto: o agente do usuário determina a direção com base no conteúdo - '': a direção é herdada dos elementos pais (equivale a não definir o atributo)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Tamanho da fonte do parágrafo. Os valores nomeados também aplicam a altura de linha e o espaçamento entre letras correspondentes.
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	Define as propriedades numéricas da fonte.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Peso da fonte do parágrafo.
lineClamp	number	Trunca o conteúdo de texto no número de linhas especificado.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	O tom semântico aplicado ao texto do parágrafo, que altera sua cor para transmitir significado. - info: conteúdo informativo ou dicas úteis (azul). - success: resultados positivos ou estados de sucesso (verde). - warning: avisos importantes sobre possíveis problemas (laranja). - critical: problemas urgentes ou ações destrutivas (vermelho). - caution: avisos de alerta que precisam de atenção (amarelo).

Slots

Slot	Descrição
default	O conteúdo de texto do parágrafo exibido dentro do componente de parágrafo, que apresenta um bloco de texto relacionado com o estilo adequado.