Text-Decoration

As classes utilitárias de text-decoration no WPF permitem adicionar ou remover decorações de texto, como sublinhados, linhas sobre o texto ou tachados, de forma rápida e consistente. Elas utilizam a propriedade CSS text-decoration e oferecem uma variedade de estilos para personalizar a aparência do texto.

Como Funcionam as Classes de Text-Decoration

As classes seguem o padrão t-[estilo], onde [estilo] é um dos valores permitidos: underline, dashed, double, line-through, overline, solid, wavy ou none.

Classes Utilitárias	Comportamento
`t-underline`	Adiciona um sublinhado sólido* ao texto.*
`t-dashed`	Adiciona um sublinhado tracejado* ao texto.*
`t-double`	Adiciona um sublinhado* duplo ao texto.*
`t-line-through`	Adiciona um tachado* ao texto.*
`t-overline`	Adiciona uma linha sobre* o texto.*
`t-solid`	Adiciona um sublinhado sólido* (similar a* `underline`, mas pode ser usado para consistência).
`t-wavy`	Adiciona um sublinhado ondulado* ao texto.*
`t-none`	Remove qualquer decoração de texto.

Regras CSS Geradas

Cada classe é traduzida diretamente para a propriedade CSS text-decoration, seguindo o template .t-[estilo] { text-decoration: [estilo]; }. Por exemplo:

t-underline → text-decoration: underline;

t-dashed → text-decoration: dashed;

t-none → text-decoration: none;

Exemplos de Uso

Exemplo 1: Sublinhado Simples

<p class="t-underline">Este texto está sublinhado.</p>

Exemplo 2: Tachado

<p class="t-line-through">Este texto está tachado.</p>

Exemplo 3: Sublinhado Ondulado

<p class="t-wavy">Este texto tem um sublinhado ondulado.</p>

Exemplo 4: Remover Decoração

<a href="#" class="t-none">Este link não tem sublinhado.</a>

Guia de Boas Práticas

Acessibilidade: Use t-line-through para indicar texto excluído ou desatualizado, mas certifique-se de que o significado seja claro para todos os usuários.

Consistência: Use t-none para remover sublinhados de links ou outros elementos que por padrão têm decorações.

Navegadores: Alguns estilos, como dashed ou wavy, podem ter renderizações diferentes em navegadores antigos. Teste em seu ambiente alvo.

Notas

As classes de text-decoration são aplicadas diretamente ao elemento e afetam todo o texto dentro dele.

Para decorações mais complexas, como múltiplas linhas ou cores específicas, considere usar CSS personalizado.

O valor solid é similar a underline, mas pode ser útil para manter a consistência na nomenclatura.