AMP
PT
English Français العربية Español Italiano Indonesia 日本語 한국어 Русский Türkçe 中文

amp-accordion

Oferece aos usuários uma visualização rápida do conteúdo e permite pular para qualquer seção. Isso é útil para dispositivos móveis, em que é preciso rolar para ver até mesmo algumas frases.

Script obrigatório <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Layouts compatíveis container
Exemplos Exemplo de código com notas para amp-accordion

Comportamento

O componente amp-accordion permite exibir seções de conteúdo que podem ser recolhidas e expandidas. Cada um dos filhos imediatos do componente amp-accordion é considerado uma seção do accordion. Cada um desses nós precisa ser uma tag <section>.

  • Um amp-accordion pode conter um ou mais elementos <section> como filhos diretos.
  • Cada <section> precisa conter exatamente dois filhos diretos.
  • O primeiro filho da seção representa o cabeçalho e precisa ser um elemento de cabeçalho (ou seja, h1, h2, …, h6, header).
  • O segundo filho da seção pode ser qualquer tag permitida no HTML para AMP e representa o conteúdo da seção.
  • Ao clicar ou tocar no título de uma seção, ela se expande ou recolhe.
  • O estado recolhido/expandido de cada seção do elemento amp-accordion será preservado em cada nível. Para desativar a preservação desse estado, adicione o atributo disable-session-states ao elemento amp-accordion.

Exemplo: exibição de um accordion

Neste exemplo, exibimos três seções, sendo que a terceira é expandida no carregamento da página. Além disso, desativamos a preservação do estado recolhido/expandido definindo disable-session-states.

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

 
<amp-accordion disable-session-states>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section expanded>
    <h2>Section 3</h2>
    <amp-img src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"></amp-img>
  </section>
</amp-accordion>
Abrir esse snippet no playground

Para ver mais demonstrações do amp-accordion, visite o site AMP By Example.

Eventos

Os eventos abaixo serão acionados nas sections do accordion.

expand Este evento é acionado na section de destino que muda do estado recolhido para o expandido. Se você chamar expand em uma section já expandida, o evento não será acionado.
collapse Este evento é acionado na section de destino que muda do estado expandido para o recolhido. Se você chamar collapse em uma section já recolhida, o evento não será acionado.

Ações

expand Este evento é acionado na section de destino que muda do estado recolhido para o expandido. Se você chamar expand em uma section já expandida, o evento não será acionado.
toggle Esta ação alterna entre os estados expanded e collapsed do amp-accordion. Quando chamada sem argumentos, ela alterna todas as seções do accordion. Uma única seção pode ser especificada com o argumento section e o id correspondente como valor.
expand Esta ação expande um amp-accordion. Se ele já for expanded, permanecerá assim. Quando chamada sem argumentos, ela expande todas as seções do accordion. Uma única seção pode ser especificada com o argumento section e o id correspondente como valor.
collapse Esta ação recolhe um amp-accordion. Se ele já estiver recolhido, permanecerá assim. Quando chamada sem argumentos, ela recolhe todas as seções do accordion. Uma única seção pode ser especificada com o argumento section e o id correspondente como valor.

Atributos

animate Defina este atributo no <amp-accordion> para animar a expansão/recolhimento de todas as seções do accordion.
disable-session-states Defina este atributo no <amp-accordion> para desativar a preservação do estado recolhido/expandido do accordion.
expanded Defina este atributo em uma <section> para exibir a seção como expandida no carregamento da página.
expand-single-section Defina este atributo no <amp-accordion> para permitir que apenas uma <section> seja expandida por vez. Se o usuário colocar o foco sobre uma <section>, qualquer outra <section> expandida anteriormente será recolhida.

Estilo

  • Você pode usar o seletor de elemento do amp-accordion para estilizá-lo à vontade.
  • Os elementos amp-accordion são sempre display: block.
  • Os elementos <section>, de cabeçalho e conteúdo não podem ser flutuantes.
  • Quando a seção é expandida, o elemento <section> tem um atributo expanded.
  • O elemento de conteúdo é clear-fixed com overflow:hidden e, portanto, não pode ter barras de rolagem.
  • As margens dos elementos <amp-accordion>, <section>, de cabeçalho e conteúdo são definidas como 0 e podem ser modificadas em estilos personalizados.
  • Os elementos de cabeçalho e conteúdo são position:relative.

Validação

Consulte as regras do amp-accordion (em inglês) nas especificações do validador de AMP.

Precisa de mais ajuda?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Ir para Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Ir para o GitHub