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.
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.
Versão do componente |
AEM 6.4 |
AEM 6.5 |
AEM as a Cloud Service |
v1 |
Compatível com a versão 2.17.4 e anteriores |
Compatível |
Compatível |
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.
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.