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 os usuários comprimirem 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 entraremos em alguns detalhes desse componente.

Como o componente amp-accordion funciona

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 expandirá, ou comprimir o elemento responsável pelo conteúdo.
• Os estados de expandir e comprimir é preservado por cada elemento.

Eventos e ações

Componente Accordion dispara dois eventos:

• expand: quando o elemento section referente ao conteúdo muda do estado recolhido para o estado expandido.
• collapse: quando o 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>Code language: HTML, XML (xml)

O 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>
Code language: HTML, XML (xml)

O resultado será o seguinte:

No markup acima não coloquei as seis sessões, mas o código é só uma repetição do primeiro bloco. O importante nesse print são dois pontos primeiro as propriedades:

• expand-single-section: com ela determinamos somente uma 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 classe 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>
Code language: HTML, XML (xml)

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;
      }
Code language: CSS (css)

Com isso temos o resultado:

O exemplo com componente amp-accordion 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