Componente Accordion

Il componente Core Component Accordion consente di creare una raccolta di pannelli disposti in un pannello a soffietto su una pagina.

Utilizzo

Il componente Core Component Accordion consente di creare una raccolta di componenti, composti come pannelli, e disposti in un pannello a soffietto su una pagina, simile al componente Tabulazioni, ma consente di espandere e comprimere i pannelli.

  • Le proprietà del pannello di controllo possono essere definite nella finestra di dialogo diconfigurazione.
  • L’ordine dei pannelli del pannello a soffietto può essere definito nella finestra di dialogo di configurazione e nel contenitore del pannello di selezione.
  • I valori predefiniti per il componente Accordion quando viene aggiunto a una pagina possono essere definiti nella finestra di dialogo della progettazione.

Collegamento diretto a un pannello

I componenti Accordion e Tabs supportano il collegamento diretto a un pannello all’interno del componente.

Per effettuare ciò:

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

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

Versione e compatibilità

La versione corrente del componente Accordion è v1, introdotto con la release 2.5.0 dei componenti core a giugno 2019, ed è descritto in questo documento.

Nella tabella seguente sono elencate tutte le versioni supportate del componente, le versioni AEM con cui sono compatibili le versioni del componente e i collegamenti alla documentazione delle versioni precedenti.

Versione componente AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 Compatibile Compatibile Compatibile

Per ulteriori informazioni sulle versioni e sulle versioni dei componenti core, consulta il documento Versioni dei componenticore.

Output componente di esempio

Per provare il componente Accordion e per vedere esempi delle relative opzioni di configurazione, nonché l’output HTML e JSON, visita la Libreria componenti.

Dettagli tecnici

La documentazione tecnica più recente sul componente Accordion è disponibile su GitHub.

Per ulteriori informazioni sullo sviluppo dei componenti core, consulta la documentazione per lo sviluppatore di componenticore.

Configura finestra di dialogo

La finestra di dialogo di configurazione consente all’autore del contenuto di definire l’elemento Accordion, i relativi pannelli e come si presenterà e come verrà visualizzato da un visitatore alla pagina.

Scheda Articoli

scheda Elementi della finestra di dialogo di modifica del componente Accordion

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

  • Icona - L'icona del tipo di componente del pannello per una facile identificazione nell'elenco. Passate il puntatore del mouse sopra per visualizzare il nome completo del componente come una descrizione comando.
  • Descrizione - Descrizione utilizzata come testo del pannello, con impostazione predefinita sul nome del componente selezionato per il pannello.
  • Elimina - Toccate o fate clic per eliminare il pannello dal componente Accordion.
  • Ridisponi - Toccate o fate clic e trascinate per riordinare i pannelli.
SUGGERIMENTO

Se la vista della pagina viene ridotta e la finestra di dialogo di modifica diventa a schermo intero, il pulsante Aggiungi viene nascosto. Per aggiungere i componenti al componente Accordion, trascinateli dal Browser componenti e trascinateli sul componente Accordion nell’editordi pagina.

Scheda Proprietà

scheda Proprietà della finestra di dialogo di modifica del componente Accordion

  • Espansione elemento singolo - Se selezionata, questa opzione forza l'espansione di un singolo elemento a soffietto alla volta. Se si espande un elemento, verranno compressi tutti gli altri.
  • Elementi espansi - Questa opzione definisce gli elementi che vengono espansi per impostazione predefinita quando la pagina viene caricata.
    • Quando è selezionata l’espansione di un elemento singolo, è necessario selezionare un pannello. Per impostazione predefinita, è selezionato il primo pannello.
    • Se l'espansione di un elemento singolo non è selezionata, questa opzione è una selezione multipla ed è facoltativa.
  • ID - Questa opzione consente di controllare l’identificatore univoco del componente nell’HTML e nel livello dati.
    • Se lasciato vuoto, viene generato automaticamente un ID univoco che può essere trovato esaminando la pagina risultante.
    • Se viene specificato un ID, è responsabilità dell’autore assicurarsi che sia univoco.
    • La modifica dell’ID può avere un impatto su CSS, JS e tracciamento dei livelli di dati.

Selezione del puntatore del pannello

L’autore del contenuto può usare l’opzione Seleziona pannello nella barra degli strumenti del componente per passare a un altro pannello e ridisporre facilmente l’ordine dei pannelli all’interno della struttura di navigazione.

Seleziona l’icona del pannello

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

Selezione del puntatore del pannello

  • L'elenco è ordinato in base alla disposizione assegnata dei pannelli e si riflette nella numerazione.
  • Il tipo di componente del pannello viene visualizzato per primo, seguito dalla descrizione del pannello con un carattere più chiaro.
  • Toccando o facendo clic su una voce nel menu a discesa, la vista nell’editor viene sostituita da tale pannello.
  • I pannelli possono essere ridisposti in posizione mediante le maniglie di trascinamento.

Finestra di dialogo Progettazione

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

Scheda Proprietà

scheda Proprietà della finestra di dialogo Progettazione

  • Elementi titolo consentiti - Questo elenco a discesa con più selezioni definisce l'intestazione dell'elemento Accordion gli elementi HTML che possono essere selezionati da un autore.
  • Elemento titolo predefinito - Questo elenco a discesa definisce l'elemento Accordion predefinito dell'elemento HTML.

Allowed Components Tab

La scheda Componenti ​consentiti viene utilizzata per definire quali componenti possono essere aggiunti ai pannelli del componente Accordion dall’autore del contenuto come elementi.

La scheda Componenti consentiti funziona nello stesso modo della scheda con lo stesso nome quando si definisce il criterio e le proprietà di un Contenitore di layout nell'Editor modelli.

Scheda Stili

Il componente Accordion supporta AEM Style System.

In questa pagina