清單元件(v1) list-component-v

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
核心組件

建立對象：

開發人員
管理員
使用者

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

使用情況 usage

例如，清單元件可用於建立子頁面的動態清單或任意定義專案的靜態清單。

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

版本和相容性 version-and-compatibility

本檔案說明清單元件v1，其最初隨附於AEM 6.3的核心元件1.0.0版引入。

下表列出清單元件v1的相容性。

AEM 版本

清單元件v1

6.3

相容

6.4

相容

CAUTION

本檔案說明清單元件v1。

如需目前版本的List元件的詳細資訊，請參閱List元件檔案。

範例元件輸出 sample-component-output

以下是從We.Retail中取得的範例。

螢幕擷圖 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

從核心元件匯出JSON需要版本1.1.0的核心元件。如需詳細資訊，請參閱核心元件v1🔗的相容性資訊。