Med Core Component List Component kan du enkelt skapa både dynamiska och statiska listor.
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.
Vilka typer av listor som är tillgängliga och formateringsalternativen kan definieras av mallförfattaren i designdialogruta. Innehållsredigeraren kan välja bland tillgängliga listtyper och hur listelementen ska formateras i redigeringsdialogruta.
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.
AEM | List Component v1 |
---|---|
6.3 | Kompatibel |
6.4 | Kompatibel |
Det här dokumentet beskriver v1 för List-komponenten.
Mer information om den aktuella versionen av List Component finns i List-komponent -dokument.
Följande prov tas från Vi.butik.
<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>
"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"
}
JSON-export från Core Components kräver version 1.1.0 av Core Components. Se kompatibilitetsinformation för kärnkomponenter v1 för mer information.
I redigeringsdialogrutan kan innehållsförfattaren konfigurera listan och listelementen.
Listan kan byggas på olika sätt.
Oavsett hur listan byggs finns det Sorteringsalternativ som alltid kan konfigureras.
Beroende på hur innehållsförfattaren väljer att skapa listan ändras de ytterligare konfigurationsalternativen.
Listan kan byggas av de underordnade sidorna för den aktuella sidan eller en annan sida.
Listan kan skapas med en fast lista med objekt.
Tryck eller klicka på Lägg till om du vill dra in ett nytt objekt i listan.
Listan kan skapas med hjälp av resultatet av en sökning AEM innehåll.
Listan kan byggas med sidor som matchar vissa taggar under en viss plats.
Oavsett hur du väljer att skapa listan finns det vissa sorteringsalternativ som alltid kan definieras.
Använda Objektinställningar kan formateringen av listelementen konfigureras.
I designdialogrutan kan mallskaparen definiera vilka typer av listor som ska tillåtas för innehållsförfattarna samt de tillgängliga objektinställningarna.
På Listinställningar kan datumformatet definieras liksom vilken typ av listor som ska vara tillgängliga i komponenten för innehållsförfattarna.
På Objektinställningar kan du definiera formateringsalternativen för de enskilda listelementen som ska vara tillgängliga i komponenten för innehållsförfattarna.
Den senaste tekniska dokumentationen om List Component finns på GitHub.
Hela kärnkomponentprojektet kan laddas ned från GitHub.
Mer information om hur du utvecklar kärnkomponenter finns i Dokumentation för grundkomponentutvecklare.