Composant Liste (v1) list-component-v

Le composant Liste des composants principaux permet de créer facilement des listes dynamiques et statiques.

Utilisation usage

Le composant Liste peut servir à créer, par exemple, une liste dynamique de pages enfants ou une liste statique d’éléments définis de manière arbitraire.

Le type de liste disponible et les options de mise en forme peuvent être définis par l’auteur du modèle dans la boîte de dialogue de conception. L’éditeur de contenu peut sélectionner les types de liste disponibles et mettre en forme les éléments de liste dans la boîte de dialogue de modification.

Version et compatibilité version-and-compatibility

Ce document décrit la version v1 du composant Liste, introduite à l’origine avec la version 1.0.0 des composants principaux avec AEM 6.3.

Le tableau suivant répertorie la compatibilité de la version v1 du composant Liste.

Exemple de sortie de composant sample-component-output

Voici un exemple extrait de We.Retail.

Capture d’écran 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"
            }

Boîte de dialogue de modification edit-dialog

La boîte de dialogue de modification permet à l’auteur du contenu de configurer la liste et les éléments de la liste.

Paramètres de liste list-settings

La liste peut être générée de différentes manières.

Quelle que soit la création de la liste, il existe des Options de tri qui peuvent toujours être configurées.

Selon la manière dont l’auteur du contenu choisit de construire la liste, les options de configuration supplémentaires changent.

Pages enfants child-pages

La liste peut être créée à partir des pages enfants de la page active ou d’une autre page.

Liste fixe fixed-list

La liste peut être créée à l’aide d’une liste fixe d’éléments.

Appuyez ou cliquez sur le bouton Ajouter pour insérer un nouvel élément dans la liste.

Rechercher search-list

La liste peut être créée à l’aide des résultats d’une recherche de contenu AEM.

Balises tags

La liste peut être créée à l’aide de pages qui correspondent à certaines balises sous un emplacement particulier.

Options de tri sort-options

Quelle que soit la manière dont vous choisissez de créer la liste, certaines options de tri peuvent toujours être définies.

Paramètres d’élément item-settings

À l’aide de l’onglet Paramètres d’élément, la mise en forme des éléments de liste peut être configurée.

Boîte de dialogue de conception design-dialog

La boîte de dialogue de conception permet à l’auteur du modèle de définir les types de listes à autoriser aux auteurs de contenu ainsi que les paramètres d’éléments disponibles.

Paramètres de liste list-settings-1

Dans l’onglet Paramètres de liste, le format de date peut être défini et le type de liste doit être disponible dans le composant pour les auteurs de contenu.

Paramètres d’élément item-settings-1

Dans l’onglet Paramètres d’élément, les options de mise en forme des éléments de liste individuels qui doivent être disponibles dans le composant pour les auteurs de contenu peuvent être définies.

Détails techniques technical-details

La documentation technique la plus récente sur le composant de liste se trouve sur GitHub.

Le projet sur les composants principaux peut être téléchargé depuis GitHub.

Vous trouverez plus d’informations sur le développement des composants principaux dans la documentation destinée aux développeurs de composants principaux.