AMP
IT
English Deutsch Français العربية Español Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Important: this documentation is not applicable to your currently selected format stories!

amp-accordion

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Permette ai visualizzatori di dare un'occhiata alla struttura dei contenuti e passare a una sezione a loro scelta.

 

Required Scripts

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

Supported Layouts

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>
Apri questo frammento 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.

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow
Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub