清單元件(v1)

「核心元件清單元件」可讓您輕鬆建立動態和靜態清單。

使用狀況

「清單元件」可用來建立例如子頁面的動態清單或任意定義項目的靜態清單。

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

版本和相容性

本檔案說明清單元件的v1，最初是隨6.3版核心元件的1.0.0版一起AEM推出。

下表列出了清單元件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?lang=zh-Hant">
            <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?lang=zh-Hant">
            <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?lang=zh-Hant">
            <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?lang=zh-Hant">
            <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?lang=zh-Hant">
            <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?lang=zh-Hant">
            <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🔗的相容性資訊。