Componente contenedor

El componente Contenedor de componentes principales permite crear un contenedor para varios componentes adicionales en una página.

Uso

El componente Contenedor de componentes principales permite crear un contenedor para varios componentes adicionales en una página y se puede utilizar para agrupar otros componentes y aplicar un estilo o diseño común.

Versión y compatibilidad

La versión actual del componente contenedor es v1, que se introdujo con la versión 2.5.0 de los componentes principales en junio de 2019 y se describe en este documento.

La siguiente tabla detalla todas las versiones compatibles del componente, las versiones AEM con las que son compatibles las versiones del componente y los vínculos a la documentación de versiones anteriores.

Versión del componente AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 Compatible Compatible Compatible

Para obtener más información sobre las versiones y versiones de los componentes principales, consulte el documento Versiones de los componentes principales.

Salida de componente de ejemplo

Para obtener información sobre el componente contenedor, así como ejemplos de sus opciones de configuración, así como sobre la salida HTML y JSON, visite la Biblioteca de componentes.

Detalles técnicos

La documentación técnica más reciente sobre el componente de contenedor se encuentra en GitHub.

Puede encontrar más información sobre el desarrollo de componentes principales en la documentación para desarrolladores de componentes principales.

Configurar diálogo

El cuadro de diálogo de configuración permite al autor del contenido definir el elemento contenedor y cómo se comportará y aparecerá para un visitante de la página.

Cuadro de diálogo Editar del componente contenedor

  • Diseño : esta opción define el comportamiento o el comportamiento de diseño del componente contenedor.
    • Simple : define un contenedor como una simple colección de componentes.
    • Cuadrícula interactiva : define un contenedor como un diseño interactivo de AEM
  • Color de fondo : se puede definir como valores RGB de forma libre o utilizando el selector de color, según la configuración
  • Imagen de fondo : define un color de fondo para el contenedor, según la configuración
  • ID : esta opción permite controlar el identificador único del componente en el HTML y en la capa de datos.
    • Si se deja en blanco, automáticamente se genera un ID único que se puede encontrar inspeccionando la página resultante.
    • Si se especifica un ID, es responsabilidad del autor asegurarse de que sea único.
    • Cambiar el ID puede afectar al seguimiento de CSS, JS y capa de datos.

Diálogo de diseño

El cuadro de diálogo de diseño permite que el autor de la plantilla defina las opciones disponibles para el autor de contenido que utiliza el componente de contenedor.

Pestaña Componentes permitidos

La pestaña Componentes permitidos se utiliza para definir qué componentes puede agregar el autor del contenido como elementos al componente contenedor.

La ficha Componentes permitidos funciona del mismo modo que la ficha del mismo nombre cuando define la política y las propiedades de un contenedor de diseño en el Editor de plantillas.

Pestaña Componentes predeterminados

La pestaña Componentes predeterminados se utiliza para definir qué componente se añade al componente cuando se coloca un tipo de recurso en particular en el contenedor, de forma similar a cómo se definen los componentes predeterminados en la plantilla de página.

Pestaña Configuración interactiva

Pestaña Configuración interactiva del cuadro de diálogo de diseño del componente Contenedor

  • Columnas : define el número de columnas de la cuadrícula del contenedor resultante.

Pestaña Fondo

Pestaña Fondo del cuadro de diálogo de diseño del componente Contenedor

  • Imagen de fondo
    • Habilitar imagen de fondo : seleccione esta opción para permitir que el autor del contenido defina una imagen de fondo para el contenedor.
  • Color de fondo
    • Activar color de fondo : seleccione esta opción para permitir que el autor del contenido defina un color de fondo para el contenedor.
    • Solo muestras : seleccione esta opción para permitir que el autor del contenido seleccione únicamente muestras de color predefinidas para el color de fondo del contenedor.
      • Solo está disponible cuando se selecciona Habilitar color de fondo
  • Muestras permitidas : defina los colores predefinidos desde los que el autor del contenido puede seleccionar el color de fondo del contenedor
    • Utilice el botón Add para añadir una muestra de color predefinida. Una vez añadida, se añade una entrada a la lista, que contiene las columnas siguientes:
    • Valor : defina el color manualmente mediante valores RGB.
      • Toque o haga clic en el selector de color para seleccionar más fácilmente un color ajustando valores RGB individuales o definiendo un valor hexadecimal.
    • Eliminar : toque o haga clic para eliminar una muestra.
    • Reorganizar : toque o haga clic y arrastre para reorganizar el orden de las muestras.

Pestaña Estilos

El componente Contenedor es compatible con el sistema de estilos AEM.

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now