Componente de Lista (v1)

O componente de Lista, dos Componentes principais, permite criar com facilidade 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 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.

Versão e compatibilidade

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.

Exemplo de saída do componente

O exemplo a seguir foi retirado do 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"
            }

Caixa de diálogo de edição

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

Configurações da lista

A lista pode ser criada de maneiras diferentes.

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

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.

Páginas secundárias

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

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

Lista fixa

A lista pode ser criada usando uma lista fixa de itens.

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

• Insira o texto para o item na lista ou use a caixa de diálogo de Seleção para escolher um item do 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.

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

Tags

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

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

Opções de classificação

Independentemente de como você optar por criar a lista, há certas opções de classificação que sempre podem ser 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 da lista pode ser configurada.

• Vincular itens
  Vincula itens à página correspondente
• Mostrar descrição
  Mostra descrições do item de link
• Mostrar data
  Mostra a data de modificação do item de link.

Caixa de diálogo de design

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.

Configurações da lista

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.

• Formato da data - Formato a ser usado na exibição da última data de modificação
• Desativar secundárias - Desativa o tipo de listas secundárias no componente
• Desativar estática - Desativa o tipo de lista estática no componente
• Desativar pesquisa - Desativa o tipo de lista de pesquisa no componente
• Desativar tags - Desativa o tipo de lista de tags no componente

Configurações do item

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.

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

Detalhes técnicos

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.

Recursos do Business.Adobe.com