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 atributodisable-session-states
ao elementoamp-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
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>
Para ver mais demonstrações do amp-accordion
, visite o site AMP By Example.
Eventos
Os eventos abaixo serão acionados nas section
s 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 sempredisplay: 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 atributoexpanded
. - 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.
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