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.

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á:

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

  
...
  



  

    

      

        

          TOGGLE FILTERS
          
ALL FILTERS HERE
        
        APPLY FILTERS
      
    
  
  

    

      

        

          
...
          
...
        
      
      
    
  

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:

const pageHeader = document.querySelector(".page-header");
const nav = pageHeader.querySelector("nav");

const postFilters = UIkit.sticky(".post-filters", {
  offset: nav.offsetHeight
});

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

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:

window.addEventListener("resize", function () {
  postFilters.offset = nav.offsetHeight;
});

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:

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

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:

  ALL FILTERS HERE

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

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

const dropdown = UIkit.dropdown(".post-filters-dropdown");

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

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:

...

if (mqMedium.matches) {
  dropdown.boundary = postFiltersFormInner;
}

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

...

window.addEventListener("resize", function () {
  if (mqMedium.matches) {
    dropdown.boundary = postFiltersFormInner;
  } else {
    dropdown.boundary = postFiltersForm;
  }
});

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ção, há 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!