Componente de lista (v2) list-component
O componente de lista, que faz parte dos componentes principais, permite criar listas dinâmicas e estáticas com facilidade.
Uso usage
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 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 version-and-compatibility
Este documento descreve a versão v1 do componente de lista, que foi introduzida com a versão 2.0.0 dos componentes principais em janeiro de 2018.
Redirecionamentos em listas redirects
Quando uma página tem um destino de redirecionamento (independentemente de estar apontando para um URL externo ou para outra página do AEM), uma lista que contém links para ele, aponta diretamente para o URL do destino de redirecionamento.
Exemplo redirect-example
- Crie uma página A que redirecione para a página B.
- Crie uma página C que redireciona para
https://aemcomponents.dev - Em uma página D, insira um componente de lista que contenha as páginas A e C
- Os respectivos links que são gerados, apontam diretamente para a página B e
https://aemcomponents.dev
Exemplo de saída do componente sample-component-output
Para experimentar o componente de Lista, e ver exemplos de suas opções de configuração e de saídas HTML e JSON, visite a Biblioteca de Componentes.
Detalhes técnicos technical-details
A documentação técnica mais recente sobre o Componente de Lista pode ser encontrada no GitHub.
Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.
Caixa de diálogo de edição edit-dialog
A caixa de diálogo de edição permite que o autor de conteúdo configure a lista e os itens da lista.
Guia Configurações de lista list-settings-tab
A lista pode ser criada de maneiras diferentes.
Independentemente de como a lista seja criada, há Opções de Classificação e ID 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 filhas child-pages
A lista pode ser criada das páginas filhas da página atual ou de outra página.
-
Página primária
- A página cujas páginas filhas devem fazer a lista
- Deixe em branco para utilizar a página atual
-
Profundidade de filhos
Quantos níveis abaixo na hierarquia devem ser usados
Lista fixa fixed-list
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 search-options
A lista pode ser criada usando os resultados de uma pesquisa de conteúdo AEM.
-
Pesquisar consulta
A string para a qual será executada uma pesquisa de texto completo 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 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
Quais tags devem ser correspondidas- Use a caixa de diálogo Procurar para selecionar as tags
-
Combinação
Defina qual 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 sort-options
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 em que os itens devem ser classificados- ascendente
- descendente
-
Máximo de itens
Número máximo de itens exibidos na lista.- Deixe em branco para retornar todos os itens.
-
ID - Essa opção permite controlar o identificador exclusivo do componente no HTML e na Camada de Dados.
- Caso deixado em branco, um ID exclusivo é gerado automaticamente para você e pode ser encontrado ao inspecionar a página resultante.
- Se um ID for especificado, é responsabilidade do autor garantir que ele seja exclusivo.
- A alteração do ID pode afetar o rastreamento de CSS, JS e da Camada de Dados.
Guia Configurações de itens item-settings-tab
Usando a guia Configurações de item, a formatação dos elementos da lista pode ser configurada.
- Vincular itens
Vincular os itens à página correspondente - Mostrar descrição
Mostrar descrições do item do link - Mostrar data
Mostrar data de modificação do item do link
Caixa de diálogo de design design-dialog
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 list-settings
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 de data
Formato a ser usado para exibir a data da última modificação - Desabilitar itens secundários
Desabilitar o tipo de lista de itens secundários no componente - Desabilitar estática
Desabilitar o tipo de lista estática no componente - Desabilitar pesquisa
Desabilitar o tipo de lista de pesquisa no componente - Desabilitar tags
Desabilitar a lista de tags no componente
Configurações do item item-settings
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.
- Vincular itens
Habilitar a opção Vincular itens 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
Guia Estilos styles-tab
O componente de Imagem é compatível com o Sistema de Estilos do AEM.
Camada de dados de clientes Adobe data-layer
O componente de lista oferece suporte à Camada de dados de clientes Adobe.