Componente Pannello a soffietto accordion-component

Il componente core Pannello a soffietto consente di creare una raccolta di pannelli inclusi in un pannello a soffietto su una pagina.

Utilizzo usage

Il componente core Pannello a soffietto consente di creare una raccolta di componenti, composti come pannelli e inclusi in un Pannello a soffietto su una pagina, in modo simile al componente Schede, ma con la possibilità di espandere e comprimere i pannelli.

Versione e compatibilità version-and-compatibility

La versione corrente del componente Pannello a soffietto è la v1, introdotta con la versione 2.5.0 dei Componenti core a giugno 2019, ed è quella descritta in questo documento.

La tabella che segue descrive tutte le versioni supportate del componente, le versioni di AEM con cui le versioni del componente sono compatibili e i collegamenti alla documentazione delle versioni precedenti.

Versione del componente
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v1
Compatibile con la
versione 2.17.4 e precedenti
Compatibile
Compatibile

Per ulteriori informazioni sulle versioni e sugli aggiornamenti dei Componenti core, vedi il documento Versioni dei Componenti core.

Esempio di output del componente sample-component-output

Per avere un’idea del componente Pannello a soffietto e vedere esempi delle opzioni di configurazione e dell’output HTML e JSON, visita la libreria dei componenti.

Dettagli tecnici technical-details

La documentazione tecnica più recente sul componente Pannello a soffietto è disponibile su GitHub.

Per ulteriori informazioni sullo sviluppo di Componenti core, vedi la documentazione per gli sviluppatori di Componenti core.

Collegamento diretto a un pannello deep-linking

I componenti Pannello a soffietto, Carosello e Schede supportano il collegamento diretto a un pannello all’interno del componente.

Per effettuare questo collegamento:

  1. Visualizza la pagina del componente utilizzando l’opzione Visualizza come pubblicato nell’editor di pagine.
  2. Esamina il contenuto della pagina e identifica l’ID del pannello.
    • Esempio id="accordion-86196c94d3-item-ca319dbb0b"
  3. L’ID diventa l’ancoraggio che puoi aggiungere all’URL utilizzando un hash (#).
    • Esempio https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b

Navigando all’URL con l’ID del pannello come ancoraggio, il browser scorre direttamente fino al componente specifico e lo visualizza. Se il pannello è configurato per non essere espanso per impostazione predefinita, viene espanso automaticamente.

Pannello a soffietto e progettazione reattiva responsive-design

Tutti i componenti core sono progettati per essere completamente reattivi, garantendo un’esperienza fluida su tutti i dispositivi.

Alcuni componenti avanzati, come il componente Pannello a soffietto, possono richiedere una considerazione specifica nel contesto del progetto di implementazione, al fine di mantenere la reattività in tutte le condizioni. Per ulteriori informazioni, consulta il documento Progettazione reattiva dei componenti core.

Finestra di dialogo per configurazione configure-dialog

La finestra di dialogo per configurazione consente all’autore di contenuto di definire l’elemento Pannello a soffietto, i relativi pannelli e il suo comportamento e aspetto nei confronti di chi visita la pagina.

Scheda Elementi items-tab

Scheda Elementi della finestra di dialogo per modifica del componente Pannello a soffietto

Utilizza il pulsante Aggiungi per aprire il selettore di componenti e scegliere quale componente aggiungere come pannello. Una volta aggiunto, all’elenco viene aggiunta una voce che contiene le seguenti colonne:

  • Icona: l’icona del tipo di componente del pannello per facilitarne l’identificazione nell’elenco. Passa il puntatore del mouse sulla voce per visualizzare il nome completo del componente sotto forma di descrizione comando.
  • Descrizione: il testo descrittivo del pannello; per impostazione predefinita è il nome del componente selezionato come pannello.
  • Elimina: tocca o fai clic per eliminare il pannello dal componente Pannello a soffietto.
  • Ridisponi: tocca o fai clic e trascina per modificare l’ordine dei pannelli.
TIP
Se il riquadro di visualizzazione della pagina viene ridotto in modo che la finestra di dialogo per modifica diventi a schermo intero, il pulsante Aggiungi sarà nascosto. I componenti possono comunque essere aggiunti al componente Pannello a soffietto trascinandoli dal browser dei componenti e rilasciandoli sul componente Pannello a soffietto nell’editor di pagine.

Scheda Proprietà properties-tab

Scheda Proprietà della finestra di dialogo per modifica del componente Pannello a soffietto

  • Espansione di un singolo elemento: se selezionata, questa opzione consente di espandere un singolo elemento del Pannello a soffietto alla volta. L’espansione di un singolo elemento determinerà la compressione di tutti gli altri.

  • Elementi espansi: questa opzione definisce gli elementi che vengono espansi per impostazione predefinita al caricamento della pagina.

    • Quando si seleziona Espansione di un singolo elemento, è necessario selezionare un pannello. Per impostazione predefinita, viene selezionato il primo pannello.
    • Quando Espansione di un singolo elemento non è selezionata, questa opzione è a selezione multipla ed è facoltativa.
  • ID: questa opzione consente di controllare l’identificatore univoco del componente nel codice HTML e in Data Layer.

    • Se non specificato, viene generato automaticamente un ID univoco reperibile sulla pagina risultante.
    • Se l’ID viene specificato, è responsabilità dell’autore accertarsi che sia univoco.
    • La modifica dell’ID può avere un impatto sul tracciamento di CSS, JS e Data Layer.

Finestra a comparsa selezione pannello select-panel-popover

L’autore di contenuto può utilizzare l’opzione Seleziona pannello nella barra degli strumenti del componente per passare a un altro pannello da modificare e per modificare facilmente l’ordine dei pannelli nel Pannello a soffietto.

Icona Seleziona pannello

Dopo aver selezionato l’opzione Seleziona pannello nella barra degli strumenti del componente, i pannelli del Pannello a soffietto configurati vengono visualizzati come elenco a discesa.

Finestra a comparsa selezione pannello

  • L’elenco viene ordinato in base alla disposizione assegnata ai pannelli, che si evidenzia nella numerazione.
  • Il tipo di componente del pannello viene visualizzato per primo, seguito dalla descrizione del pannello in caratteri più chiari.
  • Toccando o facendo clic su una voce nel menu a discesa, nell’editor viene visualizzato il pannello corrispondente.
  • I pannelli possono essere riposizionati tramite le maniglie di trascinamento.

Finestra di dialogo per progettazione design-dialog

La finestra di dialogo per progettazione consente all’autore del modello di definire le opzioni disponibili per l’autore di contenuto che utilizza il componente Pannello a soffietto e le impostazioni predefinite scelte al momento del posizionamento del Pannello a soffietto.

Scheda Proprietà properties-tab-design

Scheda Proprietà della finestra di dialogo per progettazione

  • Elementi intestazione consentiti: questo elenco a discesa a selezione multipla definisce gli elementi HTML per l’intestazione del Pannello a soffietto che possono essere selezionati da un autore.
  • Elemento intestazione predefinito: questo elenco a discesa definisce l’elemento HTML predefinito per l’intestazione del Pannello a soffietto.

Scheda Componenti consentiti allowed-components-tab

La scheda Componenti consentiti viene utilizzata per definire quali componenti possono essere aggiunti come elementi al Pannello a soffietto dall’autore di contenuto.

La scheda Componenti consentiti funziona come la scheda con lo stesso nome utilizzata per definire i criteri e le proprietà di un Contenitore layout nell’editor di modelli.

Scheda Stili styles-tab

Il componente Pannello a soffietto supporta il sistema di stili di AEM.

Adobe Client Data Layer data-layer

Il componente Pannello a soffietto supporta Adobe Client Data Layer.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c