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
