Componente Elenco (v1) list-component-v

Il componente core Elenco consente di creare facilmente elenchi dinamici e statici.

Utilizzo usage

Il componente Elenco può essere utilizzato per creare, ad esempio, un elenco dinamico di pagine figlie o un elenco statico di elementi definiti arbitrariamente.

Il tipo di elenchi disponibili e le opzioni di formattazione possono essere definiti dall’autore del modello nella finestra di dialogo per progettazione. L’editor di contenuto può scegliere tra i tipi di elenchi disponibili e come formattare gli elementi dell’elenco nella finestra di dialogo per modifica.

Versione e compatibilità version-and-compatibility

Questo documento descrive la versione 1 del componente Elenco, originariamente introdotto con la versione 1.0.0 dei Componenti core in AEM 6.3.

La tabella che segue riporta la compatibilità della versione 1 del componente Elenco.

Esempio di output del componente sample-component-output

Di seguito è riportato un esempio tratto da We.Retail.

Schermata screenshot

HTML html

<div class="cmp cmp-list aem-GridColumn aem-GridColumn--default--12">

<ul>
    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/arctic-surfing-in-lofoten.html">
            <span class="cmp-list--item-title">Arctic Surfing In Lofoten</span>

        </a>

    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/summit-success-in-the-himalayas.html">
            <span class="cmp-list--item-title">Summit Success in the Himalayas</span>

        </a>

    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/climbing-on-kalymnos-island--greece.html">
            <span class="cmp-list--item-title">Climbing on Kalymnos Island, Greece</span>

        </a>

    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/running-at-the-great-wall-marathon.html">
            <span class="cmp-list--item-title">Running at the Great Wall Marathon</span>

        </a>

    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/skiing-deep-powder-in-siberia.html">
            <span class="cmp-list--item-title">Skiing deep powder in Siberia</span>

        </a>

    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/climbing-in-the-massif-du-mont-blanc.html">
            <span class="cmp-list--item-title">Climbing in the Massif du Mont Blanc</span>

        </a>

    </article>
</li>
</ul>

</div>

JSON json

"articles_list": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              ":type": "weretail/components/content/articleslist",
              "tagsMatch": "any",
              "displayAs": "teaser",
              "feedEnabled": "true",
              "listFrom": "children",
              "limit": "0",
              "orderBy": "cq:lastModified",
              "pageMax": "0"
            }

Finestra di dialogo per modifica edit-dialog

La finestra di dialogo per modifica consente all’autore di contenuto di configurare l’elenco e i relativi elementi.

Impostazioni elenco list-settings

L’elenco può essere creato in diversi modi.

Indipendentemente dalla modalità di creazione dell’elenco, è sempre possibile configurare le Opzioni di ordinamento.

A seconda di come l’autore del contenuto sceglie di creare l’elenco, le opzioni di configurazione aggiuntive cambiano.

Pagine figlie child-pages

L’elenco può essere costituito dalle pagine figlie della pagina corrente o di un’altra pagina.

Elenco fisso fixed-list

L’elenco può essere creato utilizzando elementi fissi.

Tocca il o fai clic sul pulsante Aggiungi per inserire un nuovo elemento nell’elenco.

Ricerca search-list

L’elenco può essere creato utilizzando i risultati di una ricerca di contenuto AEM.

Tag tags

L’elenco può essere creato utilizzando pagine che corrispondono a determinati tag presenti in una posizione specifica.

Opzioni di ordinamento sort-options

Indipendentemente dalla modalità di creazione dell’elenco, è sempre possibile definire alcune opzioni di ordinamento.

Impostazioni elemento item-settings

Utilizzando la scheda Impostazioni elemento, è possibile configurare la formattazione degli elementi dell’elenco.

Finestra di dialogo per progettazione design-dialog

La finestra di dialogo per progettazione consente all’autore del modello di definire i tipi di elenchi da consentire agli autori di contenuto e le impostazioni disponibili per gli elementi.

Impostazioni elenco list-settings-1

Nella scheda Impostazioni elenco, è possibile definire il formato della data e i tipi di elenchi da rendere disponibili nel componente per gli autori di contenuto.

Impostazioni elemento item-settings-1

Nella scheda Impostazioni elemento, è possibile definire le opzioni di formattazione per i singoli elementi dell’elenco che devono essere disponibili nel componente per gli autori di contenuto.

Dettagli tecnici technical-details

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

L’intero progetto dei Componenti core può essere scaricato da GitHub.

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