List Component (v1) list-component-v

Med Core Component List Component kan du enkelt skapa både dynamiska och statiska listor.

Användning usage

List-komponenten kan användas för att skapa t.ex. en dynamisk lista med underordnade sidor eller en statisk lista med godtyckligt definierade objekt.

Typen av tillgängliga listor och formateringsalternativ kan definieras av mallförfattaren i designdialogrutan. Innehållsredigeraren kan välja bland tillgängliga listtyper och hur listelementen ska formateras i redigeringsdialogrutan.

Version och kompatibilitet version-and-compatibility

I det här dokumentet beskrivs v1 i List Component, som ursprungligen introducerades i version 1.0.0 av Core Components med AEM 6.3.

I följande tabell visas kompatibiliteten för v1 för List-komponenten.

Exempel på komponentutdata sample-component-output

Följande är ett exempel från We.Retail.

Skärmbild 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"
            }

Dialogrutan Redigera edit-dialog

I redigeringsdialogrutan kan innehållsförfattaren konfigurera listan och listelementen.

Listinställningar list-settings

Listan kan byggas på olika sätt.

Oavsett hur listan är uppbyggd finns det Alternativ för sortering som alltid kan konfigureras.

Beroende på hur innehållsförfattaren väljer att skapa listan ändras de ytterligare konfigurationsalternativen.

Underordnade sidor child-pages

Listan kan byggas av de underordnade sidorna för den aktuella sidan eller en annan sida.

Fast lista fixed-list

Listan kan skapas med en fast lista med objekt.

Tryck eller klicka på knappen Lägg till om du vill infoga ett nytt objekt i listan.

Sök search-list

Listan kan skapas med hjälp av resultatet av en sökning AEM innehåll.

Taggar tags

Listan kan byggas med sidor som matchar vissa taggar under en viss plats.

Sorteringsalternativ sort-options

Oavsett hur du väljer att skapa listan finns det vissa sorteringsalternativ som alltid kan definieras.

Objektinställningar item-settings

På fliken Objektinställningar kan du konfigurera formateringen för listelementen.

Designdialogruta design-dialog

I designdialogrutan kan mallskaparen definiera vilka typer av listor som ska tillåtas för innehållsförfattarna samt de tillgängliga objektinställningarna.

Listinställningar list-settings-1

På fliken Listinställningar kan datumformatet definieras liksom vilken typ av listor som ska vara tillgängliga i komponenten för innehållsförfattarna.

Objektinställningar item-settings-1

På fliken Objektinställningar kan du definiera formateringsalternativen för de enskilda listelementen som ska vara tillgängliga i komponenten för innehållsförfattarna.

Teknisk information technical-details

Den senaste tekniska dokumentationen om List-komponenten finns på GitHub.

Hela kärnkomponentprojektet kan hämtas från GitHub.

Mer information om hur du utvecklar kärnkomponenter finns i dokumentationen för kärnkomponentutvecklare.