Componente scheda

Il componente core Tabs Component consente l'organizzazione del contenuto su più schede.

Utilizzo

Il componente Tabulazioni consente all’autore del contenuto di organizzare il contenuto della pagina all’interno di più schede.

La finestra di dialogo di modifica consente all'autore del contenuto di definire più schede e di impostare la scheda attiva. Utilizzando la finestra di dialogo progettazione, l'autore del modello può definire quali componenti possono essere aggiunti alle schede e personalizzare gli stili.

SUGGERIMENTO

Sono supportati i componenti scheda nidificati (schede all’interno delle schede).

È possibile individuare/selezionare componenti scheda semplici (non nidificati) utilizzando la struttura contenuto, ma non è possibile utilizzare schede nidificate.

Collegamento diretto a un pannello

Le schede e i componenti Accordion 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 di 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 Tabs è v1, introdotto con la release 2.2.0 dei componenti core a ottobre 2018, 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, consultare il documento Versioni dei componenti core.

Esempio di output del componente

Per provare il componente Tabs e vedere esempi delle relative opzioni di configurazione, nonché l'output HTML e JSON, visitare la Libreria componenti.

Dettagli tecnici

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

Ulteriori dettagli sullo sviluppo di componenti core sono disponibili nella documentazione per lo sviluppo di componenti core.

Finestra di dialogo Modifica

La finestra di dialogo di modifica consente all’autore del contenuto di creare, rinominare e ridisporre le schede, nonché definire la scheda attiva.

Scheda Articoli

Scheda Elementi della finestra di dialogo di modifica del componente

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

  • Icona - L'icona del tipo di componente della scheda per facilitarne l'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 della scheda, con impostazione predefinita sul nome del componente selezionato per la scheda.
  • Elimina - Toccate o fate clic per eliminare la scheda dal componente scheda.
  • Ridisponi - Toccate o fate clic e trascinate per riordinare l'ordine delle schede.
SUGGERIMENTO

Se la vista della pagina viene ridotta in modo che la finestra di dialogo di modifica diventi a schermo intero, il pulsante Aggiungi verrà nascosto. I componenti possono essere aggiunti al componente Tabs trascinando dal browser Componenti e rilasciando il componente Tabs nell'editor pagina.

Scheda Proprietà

Scheda Proprietà della finestra di dialogo di modifica del componente

  • Elemento attivo: l'autore del contenuto può definire quale scheda è attiva al caricamento della pagina.
    • Con l'opzione Default, verrà selezionata la prima scheda.
  • 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.

Scheda Accessibilità

Scheda Accessibilità della finestra di dialogo di modifica del componente

Nella scheda Accessibilità è possibile impostare i valori per le etichette Accessibilità ARIA del componente.

  • Etichetta - Valore di un attributo etichetta ARIA per il componente

Seleziona pannello

L'autore del contenuto può utilizzare l'opzione Seleziona pannello nella barra degli strumenti del componente per passare a un altro pannello per la modifica e per riordinare facilmente l'ordine delle schede.

Seleziona l’icona del pannello

Dopo aver selezionato l'opzione Seleziona pannello nella barra degli strumenti del componente, le schede configurate vengono visualizzate come un elenco a discesa.

  • L'elenco è ordinato dalla disposizione assegnata delle schede e si riflette nella numerazione.
  • Il tipo di componente della scheda viene visualizzato per primo, seguito dalla descrizione della scheda con un carattere più chiaro.

Selezione del puntatore del pannello

  • Toccando o facendo clic su una voce nel menu a discesa, la vista nell’editor passa a tale scheda.
  • Le schede possono essere ridisposte in posizione utilizzando le maniglie di trascinamento.
NOTA

Le schede non sono selezionabili dall'autore in modalità Modifica. Utilizzate la modalità Anteprima o l'opzione Visualizza come pubblicato per interagire con le schede come lettore del contenuto pubblicato.

Finestra di dialogo Progettazione

La finestra di dialogo Progettazione consente all'autore del modello di definire quali componenti possono essere aggiunti al componente Tabulazioni, nonché definire quali stili personalizzati sono disponibili per l'autore del contenuto.

Scheda Componenti consentiti

La scheda Componenti consentiti viene utilizzata per definire quali componenti possono essere aggiunti al componente Tabulazioni 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 Tabs supporta il AEM Sistema di stile.

In questa pagina