AMP

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 supportaticontainer
EsempiEsempio 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.

Mostra il codice completo

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.

expandQuesto 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.
collapseQuesto 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

expandQuesto 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.
toggleQuesta 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.
expandQuesta 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.
collapseQuesta 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

animateImposta questo attributo nell'<amp-accordion> per aggiungere un'animazione all'espansione/compressione di tutte le sezioni dell'accordion.
disable-session-statesImposta questo attributo nell'<amp-accordion> per disattivare la conservazione dello stato compresso/espanso dell'accordion.
expandedImposta questo attributo in una <section> per mostrarla in stato espanso al caricamento della pagina.
expand-single-sectionImposta 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