Categorias
AMP Accelerated mobile pages

Criando menu acordeão com AMP: amp-accordion

Um dos componentes mais populares do AMP é o amp-accordion, o componente de accordion(acordeão) ou sanfona como também é conhecido permite o usuários comprimir e expandir determinadas sessões. Ele é útil também em dispositivos móveis para reduzir a quantidade de scroll de uma sessão. Neste post iremos entrar em alguns detalhes desse componente.

Comportamento

Cada filho imediato do componente para ser considerado um accordion session precisa estar dentro de uma tag section.

  • amp-accordion pode conter uma ou mais elementos <section>
  • Cada <section> deve conter exatamente dois filhos.
  • O primeiro filho vai representar o header o ideal ele utilizar as tags h1, h2, h3, …, h6 e header.
  • Clique ou tap no header vai expandir ou comprimir o elemento responsável pelo conteúdo.
  • Os estados de expandir e comprimir é preservado por cada elemento.

Eventos e ações

Accordion component dispara dois eventos:

  • expand: quando o elemento section referente ao conteúdo muda do estado recolhido para o estado expandido.
  • collapse: quando a elemento section referente ao conteúdo muda do estado expandido para o estado recolhido.

Já quando falamos de ações temos as seguintes ações disponíveis: toggle, collapse e expand. Agora temos uma introdução sobre o componente vamos para um exemplo prático primeiro precisamos chamar o script responsável.

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

Nosso markup ficará da seguinte forma:

<amp-accordion expand-single-section>
              <section id="step1" expanded>
                <h3 class="recipe__step__title">1. Gather the ingredients.</h3>
                <p>
                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                  Perspiciatis explicabo vero, facere, dolorem quia eligendi solut.
                </p>
              </section>
              <section id="step2">
                <h3 class="recipe__step__title">
                  2. Cut half of a lime into small wedges.
                </h3>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic,
                  ipsam repellat? Animi excepturi nostrum ducimus minus natus nobis.
                </p>
              </section>
</amp-accordion>

E resultado será o seguinte:

No markup acima não coloquei as 6 sections mas o código é só uma repetição do primeiro bloco. Mas o importante nesse print são dois pontos primeiro as propriedades:

  • expand-single-section: com ela determinamos somente um sessão do acordeão será aberta por vez.
  • expanded: determina se a sessão iniciará expandida.

Segundo o componente já possui um estilo, caso queira personalizar esse estilo podemos adicionar qualquer class nos elementos que fazem parte do acordeão:

<amp-accordion expand-single-section>
              <section id="step1" expanded>
                <h3 class="recipe__step__title">1. Gather the ingredients.</h3>
                <p>
                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                  Perspiciatis explicabo vero, facere, dolorem quia eligendi soluta
                  expedita maxime animi, quos deleniti exercitationem quae impedit
                  recusandae nobis laborum hic? Sed, dolor.
                </p>
              </section>
              <section id="step2">
                <h3 class="recipe__step__title">
                  2. Cut half of a lime into small wedges.
                </h3>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic,
                  ipsam repellat? Animi excepturi nostrum ducimus minus natus nobis
                  porro, facere, ipsa id repudiandae illum tenetur nulla vel et
                  molestias fugit.
                </p>
              </section>
</amp-accordion>

css:

.recipe__step__title {
        background: var(--secondary-color);
        padding: 0.5em;
        border-top: transparent;
        border-left: transparent;
        border-right: transparent;
        border-bottom: 3px solid var(--primary-color);
        color: var(--header-color);
        text-align: left;
      }

Com isso temos o resultado:

O exemplo acima é somente para exibir como o podemos alterar o cabeçalho, por exemplo, alterando o h3 conseguimos personalizar o header da nossa sessão.

Para mais tutorias sobre amp confira a página de categoria: https://blog.fellyph.com.br/category/amp/

Para acompanhar o curso online assine o canal:

Link da playlist: https://www.youtube.com/watch?v=Ku9-Hnqjjb4&list=PLmIA3VZysEqQxsVcZ7u2ZHOnh78eIOKON

Categorias
AMP Accelerated mobile pages

Ouvindo eventos com AMP e trabalhando com amp-sidebar

Para esse post iremos implementar um menu slider, com isso precisar aprender dois itens importantes o primeiro é interação com eventos e o segundo é o componente amp-sidebar, para nosso exercício iremos aplicar em 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 os menu sempre cobrindo o nosso conteúdo, como podemos ver na imagem abaixo:

nosso menu se comporta na versão mobile

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

atributo “on”

Com AMP para acompanhar eventos com 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 podemos definir ações específicas chamadas de actions, por exemplo:

<button on="tap:menu.hide">

No código acima temos um botão que está acompanhando 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>

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 componentes AMP e elementos HTML que são elas:

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

Alguns componentes possuem ações e eventos 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 eventos e ações com AMP vamos implementar esses novos recursos a nossa aplicação, primeiramente vamos adicionar o component amp-sidebar em 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>

O componente amp-sidebar oculta o conteúdo destinado a uma 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>

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 o evento de tap e quando pressionado ele irá realizar ação de toggle em 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 em 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. Caso tenha alguma dúvida só deixar um comentário.