列表组件(v1)

核心组件列表组件允许轻松创建动态和静态列表。

使用

列表组件可用于创建子页面的动态列表或任意定义项目的静态列表。

可用列表类型和格式选项可由模板作者在设计对话框中定义。内容编辑器可以从可用的列表类型中进行选择，以及如何在编辑对话框中设置列表元素的格式。

版本和兼容性

本文档介绍列表组件的v1，该组件最初随AEM 6.3核心组件版本1.0.0一起引入。

下表列出了列表组件v1的兼容性。

AEM 版本	列表组件v1
6.3	兼容
6.4	兼容

注意

本文档介绍列表组件的v1。

有关列表组件当前版本的详细信息，请参阅列表组件文档。

组件输出示例

以下是从We.Retail获取的示例。

屏幕快照

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

"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时，需要安装核心组件版本1.1.0。有关更多信息，请参阅核心组件v1🔗的兼容性信息。