Componente de Contêiner

O componente de Contêiner, dos Componentes principais, permite a criação de um contêiner para vários componentes adicionais em uma página.

Uso

O componente de Contêiner, dos Componente principais, permite a criação de um contêiner para vários componentes adicionais em uma página e pode ser usado para agrupar outros componentes e aplicar um estilo ou layout comum.

• As propriedades do contêiner podem ser selecionadas na caixa de diálogo de configuração.
• Os padrões do componente de Contêiner ao adicioná-lo a uma página podem ser definidos na caixa de diálogo de design.

Versão e compatibilidade

A versão atual do componente de Contêiner é a v1, que foi introduzida com a versão 2.5.0 dos Componentes principais em junho de 2019, e está descrita neste documento.

A tabela a seguir detalha todas as versões compatíveis do componente, as versões do AEM com as quais as versões do componente são compatíveis e os links para a documentação das versões anteriores.

Para mais informações sobre as versões dos Componentes principais, consulte o documento Versões dos Componentes principais.

Exemplo de saída do componente

Para experimentar o componente de Contêiner, 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

A documentação técnica mais recente sobre o componente de Contêiner 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 configuração

A caixa de diálogo de configuração permite que o autor de conteúdo defina o item do contêiner e como ele se comportará e será exibido para um visitante da página.

• Layout - Essa opção define o comportamento ou o comportamento do layout do componente de Contêiner.
  • Simples - Define um contêiner como uma coleção simples de componentes
  • Grade responsiva - Define um contêiner como um Layout responsivo do AEM
• Cor do plano de fundo - Definível como valores RGB de forma livre ou usando o seletor de cores, dependendo da configuração
• Imagem de plano de fundo - Define uma cor de plano de fundo para o contêiner, dependendo da configuração
• 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.

Caixa de diálogo de design

A caixa de diálogo de design permite que o autor do modelo defina as opções disponíveis para o autor de conteúdo que usa o componente de Contêiner.

Guia Componentes permitidos

A guia Componentes permitidos é usada para definir quais componentes podem ser adicionados como itens ao componente de Contêiner pelo autor de conteúdo.

Ela funciona da mesma maneira que a guia de mesmo nome ao definir a política e as propriedades de um Contêiner de layout no Editor de modelo.

Guia Componentes padrão

A guia Componentes padrão é usada para definir qual componente é adicionado ao componente quando um tipo de ativo específico é descartado no contêiner, de modo semelhante a como os componentes padrão são definidos no modelo de página.

Guia Configurações responsivas

• Colunas - Define o número de colunas na grade do contêiner resultante.

Guia Plano de fundo

• Imagem de plano de fundo
  • Ativar imagem de plano de fundo - Selecione esta opção para permitir que o autor de conteúdo defina uma imagem de plano de fundo para o contêiner.
• Cor do plano de fundo
  • Ativar cor de plano de fundo - Selecione esta opção para permitir que o autor de conteúdo defina uma cor de plano de fundo para o contêiner.
  • Somente amostras - Selecione essa opção para permitir que o autor de conteúdo selecione apenas a partir de amostras de cores predefinidas para a cor de fundo do contêiner.
    • Disponível apenas quando Ativar cor de plano de fundo estiver selecionado
• Amostras permitidas - Defina as cores predefinidas a partir das quais o autor de conteúdo pode selecionar a cor do plano de fundo do contêiner
  • Use o botão Adicionar para adicionar uma amostra de cor predefinida. Uma vez adicionada, uma entrada é adicionada à lista, que contém as seguintes colunas:
  • Valor - defina a cor manualmente por meio dos valores RGB
    • Toque ou clique no seletor de cores para selecionar uma cor mais facilmente, ajustando valores RGB individuais ou definindo um valor hexadecimal.
  • Excluir - Toque ou clique para excluir uma amostra.
  • Reorganizar - Toque ou clique e arraste para reorganizar a ordem das amostras.

Guia Estilos

O componente de Contêiner é compatível com o Sistema de Estilos do AEM.