# Classes Utilitárias Aprenda a usar todas as classes utilitárias auxiliares do WPF, desde o seu conceito até a aplicação. # Nova Página # Position O atributo **position** é retratado de uma maneira bem natural e intuitiva pelo WPF. Para atribuir classes utilitárias de posição no seu código, basta escrever o nome do valor do atributo diretamente como uma classe css: ```html
``` Abaixo segue uma lista com todas as posições suportadas pelo framework:
Classe UtilitáriaComportamento
`static`*Posicionamento padrão, segue o fluxo normal do documento.*
`sticky`*Alterna entre* `relative` *e* `fixed`*, fixando o elemento ao atingir um ponto de rolagem definido.*
`relative`*Posicionado relativo à sua posição original. Permite ajustes com* `top`, `right`, `bottom` e `left`.
`absolute`*Posicionado em relação ao ancestral mais próximo com posição não* `static`*, sai do fluxo normal.*
`fixed`*Posicionado em relação à janela do navegador, permanece fixo durante a rolagem.*
# Offset As classes utilitárias de offsets no **WPF** permitem ajustar a posição de elementos com as propriedades CSS top, right, bottom e left. Elas são projetadas para serem intuitivas, seguindo uma sintaxe clara e flexível, compatível com unidades como `%`, `px`, `dvh` e `dvw`. ### Como Funcionam as Classes de Offsets As classes de offsets seguem o padrão: (propriedade)(valor)(unidade), onde: - **Propriedade**: `top`, `right`, `bottom` ou `left`. - **Valor**: Um número inteiro (positivo ou negativo) que define o deslocamento. - **Unidade**: Opcional, pode ser `%`, `px`, `dvh` (altura dinâmica da viewport) e `dvw` (largura dinâmica da viewport). Se omitida, o valor é tratado como unitless (ex.: `top(10)` equivale a `top: 10;`). Isso significa que uma classe válida segue este formato: ```html
``` ### Usando Funções de Classe para Centralização As classes utilitárias de centralização do **WPF** simplificam o alinhamento de elementos horizontalmente, verticalmente ou em ambos os eixos. Elas combinam as propriedades left, top e transform para posicionar elementos com precisão, especialmente em elementos com position: `absolute`, `fixed` ou `sticky`. #### Como Funcionam as Classes de Centralização As classes de centralização seguem uma sintaxe simples e intuitiva: **center(tipo)**, onde o tipo define o eixo de centralização: As classes de centralização **são ideais para elementos com** **position:** `absolute`, `fixed` ou `sticky`, **dentro ou fora de um contêiner pai com** **position semelhante**. Certifique-se de que o elemento pai tenha dimensões definidas de alguma maneira (ex.: width e height) para que a centralização funcione corretamente.
Classe Utilitária Comportamento
`center(h)`*Centraliza horizontalmente o elemento.*
`center(v)`*Centraliza verticalmente o elemento.*
`center(c)`*Centraliza em **ambos** os eixos (horizontal e vertical).*
Com essa sintaxe, confira alguns exemplos dessas funções de classe em execução: ```html
``` ### Notas

**Posicionamento**: As classes de centralização requerem que o elemento tenha position: `absolute`, `fixed` ou `sticky`.

**Contêiner Pai**: Certifique-se de que o elemento pai tenha algum atributo position não estático e dimensões definidas de alguma maneira.

**Transformações Adicionais**: Certifique-se que, ao usar outros tipos de **configurações de transformação**, que elas não sobrescrevam os seus estilos!

# Z-Index As classes utilitárias de z-index do **WPF** permitem controlar a ordem de empilhamento de elementos no eixo Z, definindo qual elemento aparece acima ou abaixo de outros. Elas são ideais para layouts com sobreposições, como modais, menus ou elementos posicionados com absolute ou fixed. ### Como Funcionam as Classes de Z-Index As classes de z-index seguem o padrão: **z-(valor)**, onde: - **Valor**: Um número inteiro (positivo ou negativo) que define a ordem de empilhamento. - **Sintaxe**: A classe é formada por *z-* seguido de um número, como `z-10`, `z--5` ou `z-0`. #### Regras CSS Geradas Cada classe é traduzida diretamente para a propriedade CSS z-index. Por exemplo: - `z-10` → `z-index: 10;` - `z--5` → `z-index: -5;` - `z-0` → `z-index: 0;` ### Como Usar As classes de **z-index** são aplicadas a elementos com position: `absolute`, `relative`, `fixed` ou `sticky`, já que o z-index só afeta elementos posicionados. Use-as para controlar a sobreposição de elementos em layouts complexos. #### Exemplo 1: Sobreposição Simples Posicione um elemento acima de outro: ```html
 
 
``` #### Exemplo 2: Z-Index Negativo Coloque um elemento abaixo do conteúdo padrão: ```html
``` ### Notas

**Valores altos**: Use valores como `z-100` ou superiores para elementos que devem ficar **acima de tudo**, como *modais*.

**Valores negativos**: Use `z--1` ou **inferiores** para **elementos de fundo ou camadas abaixo do conteúdo principal**.

O **z-index** só funciona em elementos com position diferente de `static`.

Valores maiores de **z-index** colocam o elemento mais acima na ordem de empilhamento.

Evite valores extremamente altos (ex.: `z-999999`) para **manter a manutenção do código simples**.

# Overflow As classes utilitárias de `overflow` do **WPF** controlam como o conteúdo excedente de um elemento é tratado, permitindo gerenciar a visibilidade e o comportamento de rolagem em elementos com dimensões limitadas. Elas são ideais para layouts com *contêineres*, *modais* ou áreas de conteúdo **restritas**. ### Como Funcionam as Classes de Overflow As classes de `overflow` seguem uma sintaxe intuitiva que permite definir o comportamento geral ou por eixo **(x ou y)**, com ou sem tipo específico (`hidden`, `scroll`, `visible`). O padrão `overflow` sem modificadores aplica `overflow: auto;` como valor padrão.
Atributos VálidosComportamento
`auto` *Deixa o navegador encarregado do comportamento. Seu funcionamento pode variar.*
`hidden` *O conteúdo é cortado e nenhuma barra de rolagem é exibida.*
`scroll` *O conteúdo é acessível através de barras de rolagem que são exibidas mesmo que o conteúdo não precise.*
`visible` ***Valor padrão**. O conteúdo não é cortado e pode ser renderizado para fora da caixa de conteúdo.*
As classes são traduzidas diretamente para propriedades CSS. Veja alguns exemplos: - `overflow`→ `overflow: auto;` - `overflow-x` → `overflow-x: auto;` - `overflow-y-hidden` → `overflow-y: hidden;` - `overflow-scroll` → `overflow: scroll;` ### Como Usar As classes de `overflow` são aplicadas a elementos com dimensões definidas (ex.: `width`, `height`, `max-width`, `max-height`) para controlar o comportamento do conteúdo que excede essas dimensões. Elas são úteis para criar áreas roláveis, ocultar conteúdo excedente ou manter visibilidade. #### Exemplo 1: Overflow Padrão Aplica rolagem automática para conteúdo excedente em ambas as direções: ```html

``` #### Exemplo 2: Overflow por Eixo Habilita rolagem horizontal, mas oculta o conteúdo vertical excedente: ```html

``` #### Exemplo 3: Overflow com Tipo Específico Cria uma área com rolagem vertical forçada e conteúdo horizontal visível: ```html

``` #### Exemplo 4: Combinação com Posicionamento Usa overflow com classes de posicionamento e centralização: ```html

``` #### Notas

**Dimensões**: Sempre defina `width`, `height`, `max-width` ou `max-height` no elemento para que o `overflow` funcione corretamente.

**Rolagem Automática**: Use `overflow` ou `overflow-(x|y)` para rolagem apenas quando necessário.

**Combinações**: Combine com classes de posicionamento (`absolute`, `relative`, etc.) e offsets (`top`, `left`, etc.) para layouts complexos.

**Forçar Rolagem**: Aplicar o tipo `scroll` em um elemento evita o problema de barras de rolagem aparecendo e desaparecendo **quando o conteúdo é dinâmico**. Tenha em mente que **Impressoras podem imprimir o conteúdo vazado**.

As classes `overflow-x` e `overflow-y` são úteis para controle granular em layouts responsivos.

O valor `visible` pode causar sobreposição de conteúdo fora do contêiner, então use com cuidado.

Para áreas roláveis, certifique-se de que o contêiner tenha conteúdo suficiente para ativar a rolagem.

# Text-Align Os alinhadores de texto do **WPF** são classes utilitárias que controlam o alinhamento horizontal de texto em elementos HTML. Eles utilizam a propriedade CSS `text-align` para oferecer flexibilidade e simplicidade no ajuste de layouts textuais. ### Como Funcionam os Alinhadores de Texto Os alinhadores seguem as seguintes definições principais:
Classe UtilitáriaComportamento
`t-left`*Alinha o texto à esquerda.*
`t-center`*Centraliza o texto.*
`t-right`*Alinha o texto à direita.*
`t-start`*Alinha o texto no início da **direção configurada do texto**.*
`t-end`*Alinha o texto no final da **direção configurada do texto**.*
`t-justify`*Justifica o texto.*
`t-justify-all`*Justifica todas as linhas do texto, **incluindo a última**.*
### Exemplos de Uso #### Alinhamento Básico ```html

``` #### Alinhamento Dinâmico ```html

``` #### Justificação ```html

``` ### Notas

**Suporte a Idiomas**: Use `t-start` e `t-end` para layouts que precisam se adaptar a direções de texto como *RTL (right-to-left)*.

**Justify vs. Justify-All**: `t-justify` é ideal para parágrafos normais, enquanto `t-justify-all` é útil para textos curtos que exigem alinhamento completo.

O valor `justify-all` pode **não ser suportado** em navegadores mais antigos; teste a compatibilidade se necessário.

# Word-Break As classes utilitárias de `word-break` no WPF são projetadas para controlar o comportamento de quebra de palavras em elementos HTML, utilizando a propriedade CSS `word-break`. Elas são ideais para gerenciar textos longos, layouts responsivos ou conteúdos em idiomas que não utilizam espaços entre palavras. ### Como Funcionam as Classes de Word-Break As classes seguem uma sintaxe simples e intuitiva, permitindo ajustar a quebra de palavras de acordo com a necessidade. Veja as classes disponíveis:
Classes UtilitáriasComportamento
`w-nobreak` *Usa o **comportamento padrão** de quebra de palavras, onde o texto só é quebrado em **espaços em branco** ou **pontos naturais**. Palavras longas podem ultrapassar os limites do contêiner se não houver espaços suficientes.*
`w-break` *Permite que palavras longas sejam quebradas em pontos arbitrários para se ajustar ao contêiner, evitando overflow. Ideal para textos em idiomas ocidentais com palavras extensas.*
`w-break-all` *Quebra o texto em qualquer ponto, inclusive dentro de palavras. Útil para idiomas sem espaços, como chinês ou japonês.*
`w-break-keep-all` *Impede a quebra dentro de palavras, mantendo-as intactas. Pode causar overflow se as palavras forem longas, sendo ideal para preservar a integridade de palavras em idiomas com espaços.*
### Como Usar Aplique essas classes a elementos de texto como `

`, `

` ou ``. Elas são especialmente úteis em layouts responsivos ou para textos multilíngues com diferentes necessidades de quebra. #### Exemplo 1: Comportamento Padrão ```html

Palavra longa: Supercalifragilisticexpialidocious

``` #### Exemplo 2: Quebra de Palavras Longas ```html

Palavra longa: Supercalifragilisticexpialidocious

``` #### Exemplo 3: Quebra em Qualquer Ponto ```html

Texto em chinês: 这是一个很长的句子，没有空格。

``` #### Exemplo 4: Preservar Palavras ```html

Texto em japonês: これは非常に長い文で、単語を壊さないようにします。

``` ### Dicas de Uso - **Idiomas sem Espaços**: Use `w-break-all` para textos em *chinês*, *japonês* ou *tailandês*. - **Preservar Palavras**: Prefira `w-break-keep-all` para idiomas como *português* ou *inglês*, mantendo a legibilidade. - **Combinações**: Combine com classes de `overflow` (ex.: `overflow-hidden`) para gerenciar excessos de texto. - **Responsividade**: Use `w-break` com larguras dinâmicas (ex.: `w-100%`) para layouts adaptáveis. - **Testes**: Verifique o comportamento em diferentes navegadores, especialmente para idiomas específicos. ### Notas

O uso de `w-break-all` pode afetar a legibilidade; **aplique com cuidado** e teste o resultado visual.

As classes `w-nobreak` e `w-break` são mais comuns em **idiomas ocidentais**, enquanto `w-break-all` e `w-break-keep-all` atendem a necessidades de **idiomas asiáticos** ou **textos técnicos**.

# Text-Wrap As classes utilitárias de `text-wrap` no **WPF** permitem controlar como o texto é quebrado e exibido em um elemento, utilizando a propriedade CSS `text-wrap`. Elas são ideais para ajustar a apresentação de texto em layouts variados, desde evitar quebras de linha até aplicar modos avançados de formatação. A propriedade `text-wrap` define o comportamento de quebra de linha do texto dentro de um contêiner. Com as classes do WPF, você pode facilmente aplicar esses comportamentos sem escrever CSS manualmente, garantindo consistência e praticidade no design. ### Classes Disponíveis - `t-nowrap`: Impede que o texto quebre em várias linhas, exibindo-o em uma única linha contínua. Útil para títulos ou textos que devem permanecer compactos, mas pode gerar overflow se o conteúdo for maior que o contêiner. - `t-wrap`: Permite que o texto quebre em linhas de forma natural, conforme o espaço disponível e as regras de quebra de palavras do navegador. - `t-wrap-auto`: Deixa o navegador escolher o modo de quebra mais adequado. - `t-wrap-balance`: Distribui o texto de forma equilibrada entre as linhas, ideal para parágrafos curtos. - `t-wrap-stable`: Garante consistência no layout durante a renderização, evitando mudanças bruscas. - `t-wrap-pretty`: Prioriza a legibilidade, ajustando as quebras para um fluxo visual mais agradável. ### Exemplos de Uso #### Exemplo 1: Texto em Linha Única ```html Este texto longo não será quebrado em várias linhas. ``` #### Exemplo 2: Quebra de Linha Padrão ```html

Este texto será quebrado em linhas conforme o espaço disponível no contêiner.

``` #### Exemplo 3: Modos Específicos ```html

Este parágrafo será balanceado para linhas de tamanhos similares.

Este texto é ajustado para melhor legibilidade e fluidez.

``` ### Dicas e Notas

**Overflow**: Use `t-nowrap` com classes de overflow (ex.: `overflow-hidden`) para gerenciar texto que ultrapassa o contêiner.

**Compatibilidade**: Modos como *balance* e *pretty* podem não ser suportados em navegadores antigos. Teste em seu ambiente alvo.

# Word-Wrap As classes utilitárias de `word-wrap` no **WPF** são usadas para controlar o comportamento de quebra de palavras em elementos HTML, aplicando a propriedade CSS `word-wrap`. Elas ajudam a gerenciar textos longos em contêineres com largura limitada. ### Classes Disponíveis - `w-nowrap`: Impede a quebra de palavras, mantendo o texto em uma única linha. Se o texto for muito longo, ele pode ultrapassar os limites do contêiner, **resultando em overflow**. - `w-wrap`: Permite que palavras longas sejam quebradas em pontos arbitrários, ajustando o texto ao tamanho do contêiner e **evitando overflow**. ### Exemplos de Uso #### Exemplo 1: Impedir Quebra de Palavras ```html

Supercalifragilisticexpialidocious

``` #### Exemplo 2: Permitir Quebra de Palavras ```html

Supercalifragilisticexpialidocious

``` # Line-Height As classes utilitárias de `line-height` no **WPF** permitem ajustar a altura das linhas de texto de forma rápida e consistente. Elas controlam o espaçamento entre linhas, melhorando a legibilidade e a estética do texto em parágrafos, títulos e outros elementos. ### Como Funcionam as Classes de Line Height As classes seguem o padrão **lh-\[valor\]\[unidade\]**, onde: - **\[valor\]** é um número (*inteiro* ou *decimal*) que **define o tamanho da altura da linha**. - **\[unidade\]** é uma unidade de medida obrigatória: `px`, `rem`, `em` ou `%`. ### Regras CSS Geradas Cada classe é convertida para a propriedade CSS `line-height`. Por exemplo: - `lh-20px` → `line-height: 20px`; - `lh-1.5rem` → `line-height: 1.5rem`; - `lh-150%` → `line-height: 150%`; ### Como Usar Aplique as classes diretamente aos elementos HTML, como `

`, `

`, `
  • `, etc., para ajustar o espaçamento entre linhas. #### Exemplo 1: Texto de Corpo ```html

    ``` #### Exemplo 2: Títulos ```html

    ``` ### Notas

    Essas classes exigem uma unidade de medida (`px`, `rem`, `em`, ou `%`). Valores sem unidade (ex.: `lh-1.5`) não são suportados por este conjunto de utilitários.

    # Font-Size As classes utilitárias de `font-size` no **WPF** permitem ajustar o tamanho da fonte de elementos HTML de maneira rápida e consistente. Elas utilizam a propriedade CSS `font-size` e suportam unidades absolutas e relativas, como `px`, `em`, `rem` e `%`, oferecendo flexibilidade para diferentes contextos de design. ### Como Funcionam as Classes de Font-Size As classes seguem o padrão **fs-\[valor\]\[unidade\]**, onde: - **\[valor\]** é um número (*inteiro* ou *decimal*) que **define o tamanho da fonte**. - **\[unidade\]** é uma unidade de medida obrigatória: `px`, `em`, `rem` ou `%`. ### Regras CSS Geradas Cada classe é traduzida diretamente para a propriedade CSS `font-size`. Por exemplo: - `fs-16px` → `font-size: 16px`; - `fs-1.5rem` → `font-size: 1.5rem`; - `fs-120%` → `font-size: 120%`; ### Como Usar Aplique as classes diretamente a elementos de texto, como `

    `, `

    `, ``, etc., para ajustar o tamanho da fonte. As classes são ideais para criar hierarquias tipográficas claras e consistentes. #### Exemplo 1: Texto de Corpo ```html

    Este parágrafo tem fonte de 16px.

    Este parágrafo tem fonte de 1.2rem, relativo ao elemento raiz.

    ``` #### Exemplo 2: Títulos ```html

    Título Principal (32px)

    Subtítulo (24px)

    ``` #### Exemplo 3: Tamanhos Relativos ```html

    Este texto é 1.5 vezes maior que o pai.

    Este texto é 80% do tamanho do pai (1.5em * 0.8 = 1.2em do original).

    ``` #### Exemplo 4: Percentuais ```html

    Este texto é 150% maior que o tamanho da fonte do pai.

    ``` ### Dicas e Melhores Práticas

    **Hierarquia**: Combine diferentes tamanhos para criar uma hierarquia visual clara entre títulos, subtítulos e textos de corpo. Mantenha-se consistente em quais tags html utilizar para quais tamanhos;

    **Acessibilidade**: Evite tamanhos muito pequenos (ex.: `fs-10px`) para garantir legibilidade, especialmente em dispositivos móveis. O *tamanho recomendado para texto é a partir de* **12 pixels de tamanho.**

    **Testes**: Verifique o comportamento em diferentes navegadores e tamanhos de tela para garantir que o texto se ajuste corretamente.

    # 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áriasComportamento
    `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 ```html

    Este texto está sublinhado.

    ``` #### Exemplo 2: Tachado ```html

    Este texto está tachado.

    ``` #### Exemplo 3: Sublinhado Ondulado ```html

    Este texto tem um sublinhado ondulado.

    ``` #### Exemplo 4: Remover Decoração ```html Este link não tem sublinhado. ``` ### 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.