AMP

Important: this component does not support your currently selected format stories!

amp-accordion

Permette ai visualizzatori di dare un'occhiata alla struttura dei contenuti e passare a qualsiasi sezione. Questa funzione è utile per i dispositivi mobili dove anche solo un paio di frasi rendono indispensabile lo scorrimento per raggiungere una sezione.

Script obbligatorio <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Layout supportati container
Esempi Esempio di codice annotato per amp-accordion

Comportamento

Il componente amp-accordion ti permette di mostrare sezioni di contenuti comprimibili ed espandibili. Ciascuno degli elementi secondari immediati del componente amp-accordion viene considerato una sezione di accordion. Ognuno di questi nodi deve essere un tag <section>.

  • Un componente amp-accordion può contenere uno o più elementi <section> come elementi secondari diretti.
  • Ciascun elemento <section> deve contenere esattamente due elementi secondari diretti.
  • Il primo elemento secondario della sezione deve essere un elemento di intestazione (un header h1, h2, ..., h6) e rappresenta l'intestazione della sezione.
  • Il secondo elemento secondario della sezione può essere un qualsiasi tag consentito in HTML AMP e rappresenta i contenuti della sezione.
  • Facendo clic o toccando l'intestazione di una sezione, questa si espande o si comprime.
  • Lo stato compresso/espanso di ogni sezione nell'elemento amp-accordion viene mantenuto al livello di sessione. Per disattivare la conservazione di questo stato, aggiungi l'attributo disable-session-states all'elemento amp-accordion.

Esempio: visualizzazione di un accordion

In questo esempio vengono visualizzate tre sezioni, in cui la terza viene espansa al caricamento della pagina. Inoltre, abbiamo disattivato la conservazione dello stato compresso/espanso impostando 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>
Open this snippet in playground

Per vedere altre demo relative ad amp-accordion, visita il sito AMP By Example.

Eventi

The events below will be triggered on sections of accordion.

expand Questo evento viene attivato nella section target che passa dallo stato compresso a quello espanso. Tieni presente che questo evento non si attiva chiamando expand in una section già espansa.
collapse Questo evento viene attivato nella section target che passa dallo stato espanso a quello compresso. Tieni presente che questo evento non si attiva chiamando collapse in una section già compressa.

Azioni

expand Questo evento viene attivato nella section target che passa dallo stato compresso a quello espanso. Tieni presente che questo evento non si attiva chiamando expand in una section già espansa.
toggle Questa azione attiva o disattiva gli stati expanded e collapsed di amp-accordion. Quando viene chiamata senza argomenti, attiva o disattiva tutte le sezioni dell'accordion. Puoi specificare una singola sezione con l'argomento section e l' id corrispondente come valore.
expand Questa azione espande un amp-accordion. Se è già expanded, resterà tale. Quando viene chiamata senza argomenti, espande tutte le sezioni dell'accordion. Puoi specificare una singola sezione con l'argomento section e l' id corrispondente come valore.
collapse Questa azione comprime un amp-accordion. Se è già compresso, resterà tale. Quando viene chiamato senza argomenti, comprime tutte le sezioni dell'accordion. Puoi specificare una singola sezione con l'argomento section e l' id corrispondente come valore.

Attributi

animate Imposta questo attributo nell'<amp-accordion> per aggiungere un'animazione all'espansione/compressione di tutte le sezioni dell'accordion.
disable-session-states Imposta questo attributo nell'<amp-accordion> per disattivare la conservazione dello stato compresso/espanso dell'accordion.
expanded Imposta questo attributo in una <section> per mostrarla in stato espanso al caricamento della pagina.
expand-single-section Imposta questo attributo nell'<amp-accordion> per consentire solo una <section> espansa alla volta. Se l'utente si concentra su una <section>, tutte le <section> precedentemente espanse verranno compresse.

Stili

  • Puoi utilizzare il selettore di elementi amp-accordion per modificare lo stile come preferisci.
  • Gli elementi amp-accordion sono sempre display: block.
  • Gli elementi <section>, dell'intestazione e dei contenuti non consentono il floating.
  • Quando la sezione è espansa, l'elemento <section> ha un attributo expanded.
  • L'elemento dei contenuti è fissato in modo chiaro con overflow: hidden, quindi non può presentare barre di scorrimento.
  • I margini degli elementi <amp-accordion>, <section>, dell'intestazione e dei contenuti sono impostati su 0 e possono essere sovrascritti in stili personalizzati.
  • Gli elementi dell'intestazione e dei contenuti sono position: relative.

Convalida

Consulta le regole amp-accordion nella specifica dello strumento di convalida AMP.

Serve ancora aiuto?

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.

Go to 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.

Go to GitHub