Eventos com AMP e trabalhando com amp-sidebar

Image destacada com logo do amp e título do post como trabalhar como eventos no AMP
Curso AMP #10  -  Criando menu sidebar responsivo
Veja a aula criando sidebar menu com amp

Para esse post implementaremos um menu slider, com isso precisar aprender dois itens importantes o primeiro é interação com eventos com AMP e o segundo é o componente amp-sidebar.

O que é AMP Framework?

AMP é um framework que surgiu com o foco na performance e entrega de conteúdo. A sua biblioteca de componentes AMP é ideal para a criação de sites, matérias, e-mails e anúncios. Com AMP, você tem a certeza de que está trabalhando com uma plataforma focada no usuário.

Os seus componentes foram desenvolvidos pensando na rapidez de carregamento e na melhor experiência possível para o internauta. O AMP Framework é uma ótima escolha para quem quer ter resultados positivos em termos de audiência e conversões. Além disso, os seus componentes são responsivos e funcionam perfeitamente em dispositivos móveis.

Preparando o exercício para eventos com AMP

Para nosso exercício aplicaremos no nosso projeto the best caipirinha o menu atualmente se encontra sempre visível no modo desktop não temos problemas, mas nas versões mobile temos o menu sempre cobrindo o nosso conteúdo, como podemos observar na imagem abaixo:

nosso menu se comporta na versão mobile – Eventos com AMP

Como solução para o nosso problema, vamos exibir o menu apenas quando o usuário clicar no botão menu. Para isso precisamos acompanhar o eventos com AMP de click do usuário. Como efetuamos isso com AMP? Com JavaScript ouvimos os eventos através do addEventListener, mas com AMP utilizaremos o atributo on.

atributo “on”

Com AMP para acompanhar eventos com AMP de tap, cliques de mouse interações com o teclado. Esses eventos nos componentes AMP são acompanhados pelo atributo on além de acompanhar os eventos com AMP podemos definir ações específicas chamadas de actions, por exemplo:

<button on="tap:menu.hide">
Code language: HTML, XML (xml)

No código acima temos um botão que está a acompanhar a ação de tap e quando realizado o elemento com id menu onde será realizada a ação de hide para esse código funcionar precisamos de elemento com o id menu exemplo:

<div id="menu">Meu menu</div> <button on="tap:menu.hide">Fechar o menu</button>
Code language: HTML, XML (xml)

Ações

No exemplo acima utilizamos a ação hide ele faz parte de um grupo de ações genéricas disponíveis para todos os componentes AMP e elementos HTML que são elas:

  • hide
  • show
  • toggleVisibility
  • toggleClass
  • scrollTo
  • focus

Alguns componentes possuem ações e eventos com AMP específicos, por exemplo, o amp-carousel possui a ação goToSlide onde podemos exibir um slide específico e o evento slideChange que com ele podemos acompanhar esse evento e determinar alguma ação quando necessário.

amp-sidebar

Agora que temos uma introdução a ações e eventos com AMP implementaremos esses novos recursos a nossa aplicação, primeiramente adicionaremos o componente amp-sidebar na nossa aplicação ele irá necessitar um script extra:

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
Code language: HTML, XML (xml)

O componente amp-sidebar oculta o conteúdo destinado a um acesso temporário exemplo, links de navegação, botões, menus. O componente pode ser controlado por botões.

amp-sidebar possui um comportamento bem específico:

  • O conteúdo irá aparecer sempre da direita ou esquerda da página dependendo de qual valor definido pela propriedade side.
  • amp-sidebar deve conter um componente HTML válido.
  • layout nodisplay é obrigatório
  • É recomendado que o componente amp-sidebar seja um filho direto da tag body para preservar a ordem lógica do DOM especialmente para leitores de tela.
  • A ação de zoom é desabilitada para preservar o seu funcionamento.
  • A largura da sidebar pode ser ajustado via CSS, mas respeitando uma largura mínima de 45px.

Depois da introdução ao componente vamos a sua utilização:

<button class="recipe__header__menuBtn" on='tap:sidebar-menu.toggle'>Menu</button> <amp-sidebar id="sidebar-menu" side="left" layout="nodisplay"> <nav class="recipe__navigation nav"> <ul class="recipe__navigation__menu"> <li class="recipe__navigation__item"> <a href="#about">About</a> </li> <li class="recipe__navigation__item"> <a href="#ingredients">Ingredients</a> </li> <li class="recipe__navigation__item"> <a href="#steps">Steps to Make It</a> </li> </ul> </nav> </amp-sidebar>
Code language: HTML, XML (xml)

No código acima temos um botão responsável por invocar a exibição da nossa sidebar, inicialmente ela estará no estado nodisplay, acompanhamos os eventos com AMP de tap e quando pressionado ele irá realizar ação de toggle no nosso amp-sidebar com id sidebar-menu.

Todo o efeito de animação já será definido pelo componente e depois que o código é aplicado na nossa aplicação o resultado será o seguinte:

Assim temos a solução para o nosso menu tanto para desktop quanto mobile

No código acima é uma parte da nossa solução para ver a solução completa só acessa o repositório no github vamos fechando esse tutorial por aqui. Mais posts sobre AMP você encontra na página da categoria e caso tenha alguma dúvida só deixar um comentário.

Conteúdo relacionado

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.