Ir para o conteúdo principal

Responsividade, Importância e Outros Atributos

NaTodas maioria dasas classes do WPF são compatíveis com o que chamamos de atribuições. As atribuições são nada mais do que comandos extras que podem ser inclusos em uma classe utilitária do WPF que impõe sobre ela comportamentos extras ou específicos. Esses comportamentos podem ser de inúmeros tipos: responsivos, importantes ou pseudos.

Nesta lição, veremos um pouco mais sobre cada um deles e como podemos atribuir cada uma dessas atribuições nas nossas classes auxiliares:

Responsividade

As atribuições de responsividade podem ser todas encontradas no arquivo de instruções do WPF, éno possívelarquivo aplicarwpf.config.yaml dentro do seu projeto. Na folha de estilos exclusivamentedo wpf.config.yaml você pode encontrar uma seção chamada "breakpoints":

image.png

Cada um dos itens listados sobre essa lista refere-se à uma regra de estilo que define uma nova resolução em largura (utilizando pixels) para dispositivosdefinir móveisum adicionandoponto de quebra na renderização da sua página. Pegue 'mob: 1024' por exemplo: Se você atribuir o prefixo "mob:" antessob dosua nomeclasse da classe. Isso permite uma fácil customização e adaptação do layout para diferentes tamanhos de tela, garantindo uma experiência de usuário otimizada em celulares e tablets.

Uso do Prefixo "mob:"

Ao adicionar o prefixo "mob:"utilitária, antes do nome da classe, você estará definindo estilosum estilo que serãoserá aplicadosaplicado automaticamente em dispositivos comque tenham uma largura menor do que 1024px,. oO quemesmo é considerado o padrãovale para dispositivostodas móveisas emoutras nossavariações biblioteca.definidas sob essa lista.

Por exemplo, ao utilizar a combinação de classes flex e mob:grid em um elemento <div>, você pode alcançar resultados interessantes:

<div class="dp-flex mob:dp-grid">
    <!-- Conteúdo aqui -->
</div>

Neste exemplo, o elemento <div> terá o estilo display: flex em contextos padrão do projeto, mas quando a largura da tela for menor que 1024px, o estilo será alterado para display: grid, permitindo uma transição suave e eficiente entre layouts responsivos.

EssaAqui flexibilidadeo resultado final, em um CSS padrão, ficaria assim:

.dp-flex{
  display: flex;
}

@media (max-width: 1024px){
  .mob\:dp-grid{
    display: grid;
  }
}

Se for necessário atribuir novos tipos de breakpoints para o seu projeto, você pode editar essa lista de breakpoints presentes no usowpf.config.yaml para criar seus próprios pontos de quebra customizados para designs responsivos.

Importância

As atribuições de importância servem para definir, em um código CSS onde um elemento possuí duas vezes o mesmo atributo sob situações conflitantes, um ponto de partida para que o CSS descubra qual regra deve sempre se sobressair como o estilo dominante.

Leve por exemplo um elemento que precisa mudar o seu tamanho sem necessariamente estar sob um breakpoint. Ele tem um tamanho original de 50% (informado pela classe utilitária w-50%). Esse mesmo elemento receberá do prefixoJavaScript "mob:"uma facilitanova classe que mudará o seu tamanho para 25% (informado pela classe utilitária w-25%) quando o usuário clicar em algum botão dentro do site. Como são elementos conflitantes (a largura, no caso), dificilmente o navegador saberá entender que o valor de 25% é o correto a criaçãser aplicado agora. Informando o código que o novo estilo é mais importante (atribuindo a classe utilitária com o modificador de interfacesimportância adaptáveis!w-25%) agora o navegador saberá o momento em que o elemento precisa ter 25% de largura e amigáveiso paramomento dispositivosem móveis,que garantindoele umaprecisa experiênciater consistente50%.

e
<div agradávelx-data="{ paraisNarrow: osfalse usuários.}">
  <div class="w-50%" x-bind:class="{ '!w-25%': isNarrow }">
      <!-- Conteúdo aqui -->
  </div>
</div>

O resultado final disso, em um arquivo CSS comum, seria bem simples:

.w-50\%{
  width: 50%;
}

.\!w-25\%{
  width: 25%!important;
}

Voltar ao topo