O componente de Lista, dos Componentes principais, permite criar com facilidade listas dinâmicas e estáticas.
O componente de Lista pode ser usado para criar, por exemplo, uma lista dinâmica de páginas secundárias ou uma lista estática de itens definidos arbitrariamente.
O tipo de listas disponíveis e as opções de formatação podem ser definidas pelo autor do modelo na caixa de diálogo de design. O editor de conteúdo pode selecionar dentre os tipos de lista disponíveis e escolher como formatar os elementos da lista na caixa de diálogo de edição.
Este documento descreve a v1 do Componente de Lista, introduzido originalmente com a versão 1.0.0 dos Componentes principais com o AEM 6.3.
A tabela a seguir lista a compatibilidade da v1 do Componente de Lista.
Versão do AEM | Componente de Lista v1 |
---|---|
6.3 | Compatível |
6.4 | Compatível |
Este documento descreve a versão v1 do componente de Lista.
Para obter detalhes sobre a versão atual do componente de Lista, consulte o documento Componente de Lista.
O exemplo a seguir foi retirado do We.Retail.
<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>
"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"
}
A exportação JSON dos Componentes principais requer a versão 1.1.0 dos Componentes principais. Consulte as informações de compatibilidade dos Componentes principais v1 para mais informações.
A caixa de diálogo de edição permite que o autor de conteúdo configure a lista e os elementos da lista.
A lista pode ser criada de maneiras diferentes.
Independentemente de como a lista é criada, há Opções de classificação que sempre podem ser configuradas.
Dependendo de como o autor de conteúdo optar por criar a lista, as opções de configuração adicionais serão alteradas.
A lista pode ser criada das páginas secundárias da página atual ou de outra página.
A lista pode ser criada usando uma lista fixa de itens.
Toque ou clique no botão Adicionar para inserir um novo item à lista.
A lista pode ser criada usando os resultados de uma pesquisa de conteúdo AEM.
A lista pode ser criada usando páginas que correspondem a determinadas tags em um determinado local.
Independentemente de como você optar por criar a lista, há certas opções de classificação que sempre podem ser definidas.
Usando a guia configurações do item, a formatação dos elementos da lista pode ser configurada.
A caixa de diálogo de design permite que o autor do modelo defina quais tipos de listas devem ser liberadas para os autores de conteúdo, bem como as configurações de item disponíveis.
Na guia Configurações da lista, o formato da data pode ser definido, bem como o tipo de listas que deve estar disponível no componente para os autores de conteúdo.
Na guia Configurações do item, as opções de formatação para os elementos da lista individual que devem estar disponíveis no componente para os autores de conteúdo podem ser definidas.
A documentação técnica mais recente sobre o componente de Lista pode ser encontrada no GitHub.
Todo o projeto dos Componentes principais pode ser baixado do GitHub.
Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.