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.
Conteúdo
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 elementosection
referente ao conteúdo muda do estado recolhido para o estado expandido.collapse
: quando o elementosection
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
Deixe um comentário