SText <s-text>

Texto em linha com estilos de tom, peso e ênfase. SText é o wrapper de Vue 3 tipado do web component <s-text> do Shopify Polaris.

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

Boas práticas

• Escolha um type semântico. Escolha "strong" para destacar palavras ou frases importantes, "address" para um endereço postal ou de e-mail e "redundant" para texto que dá contexto a usuários de leitores de tela quando o mesmo conteúdo já aparece na tela. Escolher o tipo certo permite que as tecnologias assistivas expressem o significado do texto.
• Use ênfase com moderação. Aplique type="strong" a palavras ou números importantes dentro de uma frase, e não a frases inteiras; ênfase demais perde o efeito e torna o texto mais difícil de percorrer.
• Use tone para status inline. Tons como "critical", "success" ou "caution" chamam a atenção para um status, mas combine-os com um texto claro em vez de deixar a cor transmitir a mensagem.
• Não atenue o que importa. color="subdued" é adequado para datas, horários e metadados, mas evite usá-lo em informações críticas que os lojistas precisam ler.

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

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

Exemplo

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	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 texto. 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 texto.
interestFor	string	ID de um componente que deve responder ao interesse (por exemplo, passar o cursor e focar) neste componente.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	O tom semântico aplicado ao texto, 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). - auto: determinado automaticamente com base no contexto. - neutral: informações gerais sem uma intenção específica (cinza). - caution: avisos de alerta que precisam de atenção (amarelo).
type	"strong" | "address" | "redundant" | "generic"	O tipo semântico e o tratamento de estilo do conteúdo de texto. Outras propriedades de apresentação do texto sobrescrevem o estilo padrão. - strong: enfatiza o texto com forte importância, normalmente exibido em negrito. - generic: texto padrão sem significado semântico ou estilo especial. - address: marca o texto como informação de contato, como um endereço físico ou de e-mail. - redundant: indica que o texto é uma informação redundante ou duplicada para o contexto de leitores de tela.

Slots

Slot	Descrição
default	O conteúdo de texto exibido dentro do componente de texto, que aplica o significado semântico e o estilo adequados ao tipo de texto especificado.