Como atualizar componentes do UIkit

Aqui está a página de demonstração que vamos criar para demonstrar as coisas:

Certifique-se de rolar a página para baixo para perceber como elementos específicos se tornam pegajosos.

Assim como em outros tutoriais do UIkit, a familiaridade com essa estrutura será benéfica para acompanhar.

O projeto de demonstração

Nossa página será composta pelas seguintes seções:

  1. O cabeçalho
  2. A bandeira do herói
  3. As postagens

Veja como ficará:

A disposição da páginaA disposição da páginaA disposição da página

Aqui estão as partes importantes da marcação da página:

Observe que estamos usando diferentes classes UIkit para construir o layout. Além dessas classes predefinidas, também existem algumas personalizadas que nos ajudarão a chamar elementos específicos via JavaScript.

Se você não estiver familiarizado com o UIkit, recomendo que você abra as ferramentas de desenvolvedor do navegador e inspecione diferentes elementos para entender o que todas essas classes estão fazendo.

Atualizar componentes

Entrando em mais detalhes, o cabeçalho da página consistirá em dois elementos:

  • Uma barra de notificação
  • Um adesivo nav elemento com dois filhos div elementos. Observe que o segundo div será visível apenas em telas cuja largura seja de pelo menos 960px.

A seção de postagens incluirá os filtros e a grade.

Pegajoso

À medida que rolamos a página, os filtros devem permanecer fixos e ficar embaixo do adesivo nav elemento.

O seguinte código JavaScript irá defini-los como fixos:

Se agora imprimirmos no console este elemento pegajoso, veremos todas as opções disponíveis:

O componente adesivoO componente adesivoO componente adesivo

Prestar atenção à offset propriedade. Seu valor será diferente dependendo do tamanho da tela. Lembre-se que o segundo div do nav O elemento só será visível em telas com pelo menos 960px de largura.

Se começarmos a redimensionar a página, perceberemos que os filtros não ficarão fixos na posição esperada. Isso acontece porque não atualizamos o offset valor, mas em vez disso, mantenha apenas o que vem no carregamento da página. Então, para tornar esse componente preciso, devemos adicionar este pedaço de código:

Suspenso

Se você clicar no Alternar filtros botão, você notará que há um menu suspenso. Em um cenário real, isso pode incluir todas as tags de postagem, categorias ou quaisquer outros termos de taxonomia. Sua largura mudará dependendo do tamanho da tela.

Dito isso, em telas de até 959px, ficará assim:

O layout suspenso em telas pequenasO layout suspenso em telas pequenasO layout suspenso em telas pequenas

No entanto, em telas maiores, será o seguinte:

O layout suspenso em telas grandesO layout suspenso em telas grandesO layout suspenso em telas grandes

Observe que, no segundo caso, o menu suspenso não cobre toda a largura do pai, mas cresce logo antes do Aplicar filtros botão.

Para cumprir esse requisito, primeiro inicializaremos um novo componente suspenso usando atributos personalizados como este:

Sinta-se à vontade para ler o componente documentação para entender as opções que estamos passando.

Em seguida, obteremos uma referência a este componente assim:

Novamente, para ver todas as opções suspensas, vamos imprimi-lo no console:

O componente suspensoO componente suspensoO componente suspenso

Observe o boundary valor do parâmetro. Por padrão, definimos esse valor para o form elemento que garante que a lista suspensa corresponda à sua largura. Isso é bom para telas pequenas, mas em telas com pelo menos 960 pixels de largura, sua largura deve corresponder à largura do .post-filters-form-inner elemento. Então, para fazer isso, vamos adicionar esta condição:

Por fim, para garantir que essa condição seja atendida no redimensionamento da janela, adicionaremos este trecho de código:

Você pode verificar todo o código necessário alternando a guia JavaScript da demonstração.

Conclusão

Por hoje é só, pessoal! Este exercício mostrou como atualizar as opções de dois componentes do UIkit, fornecendo conhecimento suficiente para atualizar outros componentes do UIkit também.

Aqui está nossa página de demonstração como um lembrete:

Por último, mas não menos importante, na documentaçãohá algumas informações sobre como atualizar um componente usando o update evento. Tenha isso em mente caso seja necessário.

Como sempre, muito obrigado por ler!

Tutoriais UIkit no Tuts+

UIkit, nas próprias palavras dos desenvolvedores, é um “framework front-end leve e modular para o desenvolvimento de interfaces web rápidas e poderosas”. É uma maneira muito popular de construir interfaces de front-end, então participe com esses tutoriais!

Source link

Amazon Coaching Grátis

Venda 25K Dólares com apenas um Produto no Amazon.

Artigos Relacionados

LEAVE A REPLY

Please enter your comment!
Please enter your name here

dois × um =

- Ana Pereira -spot_img

Últimos Artigos