Componente de lista (v1)

O componente principal de Lista do componente permite a fácil criação de listas dinâmicas e estáticas.

Uso

O Componente de Lista pode ser usado para criar, por exemplo, uma lista dinâmica de páginas filhas 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 design. O editor de conteúdo pode selecionar entre os tipos de lista disponíveis e como formatar os elementos de lista na caixa de diálogo edit.

Versão e compatibilidade

Este documento descreve a v1 do Componente da Lista, originalmente introduzido com a versão 1.0.0 dos Componentes principais com a AEM 6.3.

A tabela a seguir lista a compatibilidade de v1 do Componente de Lista.

Versão do AEM	Componente de lista v1
6.3	Compatível
6.4	Compatível

Exemplo de saída do componente

A amostra a seguir é retirada de We.Retail.

Captura de tela

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"
            }

Editar caixa de diálogo

A caixa de diálogo de edição permite que o autor do conteúdo configure os elementos de lista e lista.

Configurações da lista

A lista pode ser construída de maneiras diferentes.

• Páginas secundárias
• Lista fixa
• Pesquisar
• Tags

Independentemente de como a lista é criada, há Opções de classificação que podem ser sempre configuradas.

Dependendo de como o autor do conteúdo escolher criar a lista, as opções de configuração adicionais serão alteradas.

Páginas filhas

A lista pode ser criada a partir das páginas secundárias da página atual ou de outra página.

• Página primário
  • A página cujas páginas secundárias devem fazer a lista
  • Deixe em branco para usar a página atual
• Profundidade -filho - Quantos níveis abaixo na hierarquia devem ser usados

Lista fixa

A lista pode ser construída usando uma lista fixa de itens.

Toque ou clique no botão Adicionar para inserir um novo item na lista.

• Insira o texto do item na lista ou use a Caixa de diálogo de seleção para escolher um item da AEM.
• Use a alça de arrastar para reorganizar os itens na lista.
• Use o ícone da lixeira para excluir itens na lista.

Pesquisar

A lista pode ser criada usando os resultados de uma pesquisa de conteúdo AEM.

• Query de pesquisa - a string para a qual uma pesquisa de texto completo será executada para gerar os elementos de lista
• Pesquisar - Onde a pesquisa deve ser executada
  • Use a caixa de diálogo Seleção para escolher o local no AEM
  • Usar página atual se deixado em branco

Tags

A lista pode ser criada usando páginas que correspondem a determinadas tags em um local específico.

• Página principal - Onde a correspondência de tags deve ser start
  • Use a caixa de diálogo Seleção para escolher o local no AEM
  • Usar página atual se deixado em branco
• Tags - Quais tags devem ser correspondidas
  • Use a caixa de diálogo Procurar para selecionar as tags
• Correspondência - Defina o tipo de correspondência que deve qualificar uma página a ser incluída na lista
  • qualquer tag
  • todas as tags

Opções de classificação

Independentemente de como você escolher criar a lista, há certas opções de classificação que podem ser sempre definidas.

• Ordenar por - Como os elementos devem ser ordenados
  • Título
  • Última data de modificação
• Ordem de Classificação - A ordem na qual os itens devem ser ordenados
  • ascendente
  • descendente
• Máximo de itens - Número máximo de itens exibidos na lista.
  • Deixe em branco para retornar todos os itens.

Configurações do item

Usando a guia Configurações do item, a formatação dos elementos de lista pode ser configurada.

• Vincular
  itensVincular itens à página correspondente
• Mostrar
  descriçãoMostrar descrições do item do link
• Mostrar
  dataMostrar data de modificação do item de link

Caixa de diálogo Design

A caixa de diálogo de design permite que o autor do modelo defina quais tipos de listas devem ser permitidos para os autores do conteúdo, bem como as configurações de item disponíveis.

Configurações da lista

Na guia Configurações de Lista, o formato de data pode ser definido, bem como o tipo de listas que deve estar disponível no componente para os autores de conteúdo.

• Formato de data - Formato a ser usado para a exibição da última data de modificação
• Desativar filhos - Desabilitar o tipo de lista filho no componente
• Disable Static (Desativar estático ) - Desative o tipo de lista estática no componente
• Desabilitar pesquisa - Desabilitar o tipo de lista de pesquisa no componente
• Desativar tags - Desativar o tipo de lista de tags no componente

Configurações do item

Na guia Configurações do item, as opções de formatação dos elementos de lista individuais que devem estar disponíveis no componente para os autores do conteúdo podem ser definidas.

• Itens de link - opção Ativar itens de link na caixa de diálogo de edição
• Mostrar descrições - Ativar a opção Mostrar descrições na caixa de diálogo editar
• Mostrar data - Ativar a opção Mostrar data na caixa de diálogo editar

Detalhes técnicos

A documentação técnica mais recente sobre o Componente de Lista pode ser encontrada no GitHub.

Todo o projeto de componentes principais pode ser baixado do GitHub.

Para obter mais detalhes sobre o desenvolvimento dos Componentes principais, consulte a documentação do desenvolvedor dos Componentes principais.