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 van beschikbare lijsten en het formatteren opties kunnen door de malplaatjeauteur in de ontwerpdialoogworden bepaald. De inhoudsredacteur kan uit beschikbare lijsttypes selecteren en hoe te om de lijstelementen in uit te maken uitgeeft dialoog.

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.

AEM
List Component v1
6,3
Compatibel
6,4
Compatibel
CAUTION
In dit document wordt versie 1 van de component List beschreven.
Voor details van de huidige versie van de Component van de Lijst, zie het šŸ”— document van de Component van de Lijst 0} {.

Uitvoer van voorbeeldcomponent sample-component-output

Het volgende wordt steekproef genomen van We.Retail.

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"
            }
NOTE
Voor JSON-export van de Core Components is release 1.1.0 van de Core Components vereist. Gelieve te zien de verenigbaarheidsinformatie voor de Componenten van de Kern v1voor meer informatie.

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 gebouwd, zijn er Opties van de Soortdie altijd kunnen 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.

  • Bovenliggende pagina

    • De pagina waarvan de onderliggende pagina's de lijst moeten maken
    • Leeg laten om de huidige pagina te gebruiken
  • kind-diepte - hoeveel niveaus neer in de hiĆ«rarchie zouden moeten worden gebruikt

Vaste lijst fixed-list

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

Tik of klik voeg knoop toe om een nieuw punt aan de lijst binnen te brengen.

  • Ga tekst voor het punt in de lijst in of gebruik de Dialoog van de Selectie om een punt van AEM te kiezen.
  • Gebruik de sleepgreep om de items in de lijst opnieuw te rangschikken.
  • Gebruik het prullenbakpictogram om items in de lijst te verwijderen.

Zoeken search-list

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

  • vraag van het Onderzoek - het koord waarvoor een full-text onderzoek zal in werking worden gesteld om de lijstelementen te produceren

  • Onderzoek in - waar het onderzoek in werking zou moeten worden gesteld

    • Gebruik de Dialoog van de Selectie om de plaats in AEM te kiezen
    • Huidige pagina gebruiken als deze leeg blijft

Tags tags

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

  • Bovenliggende pagina - waar de markering aanpassing zou moeten beginnen

    • Gebruik de Dialoog van de Selectie om de plaats in AEM te kiezen
    • Huidige pagina gebruiken als deze leeg blijft
  • Markeringen - welke markeringen zouden moeten worden aangepast

    • Gebruik doorbladert dialoog om de markeringen te selecteren
  • Gelijke - bepaal welk soort gelijke een pagina zou moeten kwalificeren om in de lijst worden opgenomen

    • om het even welke markering
    • alle markeringen

Sorteeropties sort-options

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

  • Orde door - hoe de elementen zouden moeten worden bevolen

    • Titel
    • Laatste gewijzigde datum
  • de Orde van de Sortering - de orde waarin de punten zouden moeten worden bevolen

    • oplopend
    • dalend
  • Max Punten - Maximum aantal punten die in lijst worden getoond.

    • Laat leeg om alle items te retourneren.

Iteminstellingen item-settings

Gebruikend het lusje van de Montages van het Punt 0} {, kan het formatteren van de lijstelementen worden gevormd.

  • Punten van de Verbinding
    Items koppelen aan de bijbehorende pagina
  • toon Beschrijving
    Beschrijvingen van het koppelingsitem weergeven
  • toon Datum
    Wijzigingsdatum van het koppelingsitem weergeven

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 het lusje van de Montages van de Lijst, kan het datumformaat worden bepaald evenals welk type van lijsten in de component aan de inhoudsauteurs beschikbaar zouden moeten zijn.

  • Formaat van de Datum - Formaat voor de vertoning van de laatste wijzigingsdatum te gebruiken
  • maak Kinderen onbruikbaar - maak het type van kindlijst in de component onbruikbaar
  • maak Statisch onbruikbaar - maak het statische lijsttype in de component onbruikbaar
  • maak Onderzoek onbruikbaar - maak het type van onderzoekslijst in de component onbruikbaar
  • maak Codes onbruikbaar - maak het type van markeringslijst in de component onbruikbaar

Iteminstellingen item-settings-1

Op het lusje van de Montages van het Punt, kunnen de het formatteren opties voor de individuele lijstelementen die in de component voor de inhoudsauteurs beschikbaar zouden moeten zijn worden bepaald.

Technische details technical-details

De recentste technische documentatie over de Component van de Lijst kan op GitHubworden gevonden.

Het volledige kerncomponentenproject kan van GitHub worden gedownload.

De verdere details over het ontwikkelen van de Componenten van de Kern kunnen in de de ontwikkelaarsdocumentatie van de Componenten van de Kern worden gevonden.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c