清單元件(v1)

核心元件清單元件可輕鬆建立動態及靜態清單。

使用狀況

清單元件可用於建立子頁的動態清單或任意定義項的靜態清單。

可用清單類型和格式選項可由範本作者在設計對話方塊中定義。內容編輯器可以從可用的清單類型中選擇，以及如何在edit對話框中格式化清單元素。

版本與相容性

本檔案說明清單元件的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🔗的相容性資訊。