Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
PT
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Русский Türkçe 中文 Polski Tiếng việt

amp-accordion

Description

Oferece aos usuários uma visualização rápida do conteúdo e permite pular para a seção desejada.

Required Scripts

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

Supported Layouts

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 este trecho 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?

Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.

Ir para o Stack Overflow
Encontrou um bug ou sente falta de um recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Ir para o GitHub