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