Lijstcomponent (v1) list-component-v

De component van de Lijst van de Component van de Kern staat voor de gemakkelijke verwezenlijking van dynamische en statische lijsten toe.

Gebruik usage

De component List kan worden gebruikt om bijvoorbeeld een dynamische lijst met onderliggende pagina's of een statische lijst met willekeurig gedefinieerde items te maken.

Het type beschikbare lijsten en opmaakopties kan door de sjabloonauteur in het dialoogvenster ontwerpdialoogvenster. De inhoudeditor kan kiezen uit beschikbare lijsttypen en hoe u de lijstelementen opmaakt in het dialoogvenster dialoogvenster bewerken.

Versie en compatibiliteit version-and-compatibility

In dit document wordt versie 1 van de component List beschreven. Deze versie is oorspronkelijk geïntroduceerd met versie 1.0.0 van de Core Components met AEM 6.3.

In de volgende tabel wordt de compatibiliteit van v1 van de component List weergegeven.

Uitvoer van voorbeeldcomponent sample-component-output

Het volgende monster wordt genomen uit Wij.Detailhandel.

Schermafbeelding 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"
            }

Dialoogvenster Bewerken edit-dialog

In het dialoogvenster Bewerken kan de auteur van de inhoud de lijst en de lijstelementen configureren.

Lijstinstellingen list-settings

De lijst kan op verschillende manieren worden samengesteld.

Ongeacht hoe de lijst wordt samengesteld, zijn er Sorteeropties dat altijd kan worden gevormd.

Afhankelijk van de manier waarop de auteur van de inhoud ervoor kiest de lijst te maken, worden de aanvullende configuratieopties gewijzigd.

Onderliggende pagina's child-pages

De lijst kan van de kindpagina's van de huidige pagina of een andere pagina worden samengesteld.

Vaste lijst fixed-list

De lijst kan worden samengesteld met behulp van een vaste lijst met items.

Tik of klik op de knop Toevoegen om een nieuw item aan de lijst toe te voegen.

Zoeken search-list

De lijst kan worden samengesteld met behulp van de resultaten van een zoekopdracht naar AEM inhoud.

Tags tags

De lijst kan worden samengesteld met pagina's die overeenkomen met bepaalde codes onder een bepaalde locatie.

Sorteeropties sort-options

Ongeacht hoe u de lijst maakt, zijn er bepaalde sorteeropties die altijd kunnen worden gedefinieerd.

Iteminstellingen item-settings

Met de Iteminstellingen kunt u de opmaak van de lijstelementen configureren.

Ontwerpdialoogvenster design-dialog

In het dialoogvenster Ontwerpen kan de sjabloonauteur definiëren welke typen lijsten zijn toegestaan aan de auteurs van de inhoud en de beschikbare iteminstellingen.

Lijstinstellingen list-settings-1

Op de Lijstinstellingen , kan de datumnotatie worden gedefinieerd en kunt u aangeven welk type lijst in de component beschikbaar moet zijn voor de auteurs van de inhoud.

Iteminstellingen item-settings-1

Op de Iteminstellingen kunt u de opmaakopties definiëren voor de afzonderlijke lijstelementen die in de component beschikbaar moeten zijn voor de makers van de inhoud.

Technische details technical-details

De meest recente technische documentatie over de component List kan op GitHub worden gevonden.

Het volledige kerncomponentenproject kan van GitHub worden gedownload.

Meer informatie over het ontwikkelen van kerncomponenten vindt u in de Documentatie voor ontwikkelaars van kerncomponenten.