Show Menu
TOPICS×

Componente de contenedor

El componente Contenedor de componentes principales permite la creación de un contenedor para varios componentes adicionales en una página.

Uso

El componente Contenedor de componentes principales permite la creación de 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.
  • Las propiedades del contenedor se pueden seleccionar en el cuadro de diálogo Configurar cuadro de diálogo configurar.
  • Los valores predeterminados del componente Contenedor al agregarlo a una página se pueden definir en el cuadro de diálogo de diseño.

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.
En la tabla siguiente se detallan todas las versiones compatibles del componente, las versiones de AEM con las que las versiones del componente son compatibles y los vínculos a la documentación de versiones anteriores.
Versión del componente
AEM 6.3
AEM 6.4
AEM 6.5
v1
Compatible
Compatible
Compatible
Para obtener más información sobre las versiones y versiones de los componentes principales, consulte el documento Versiones de componentes principales.

Ejemplo de salida de componente

Para experimentar el componente Contenedor y ver ejemplos de sus opciones de configuración, así como la salida HTML y JSON, visite la biblioteca de componentes.

Detalles técnicos

La documentación técnica más reciente sobre el componente Contenedor puede encontrarse en GitHub .
Encontrará más detalles sobre el desarrollo de los componentes principales en la documentación para desarrolladores de los componentes principales.

Configurar cuadro de diálogo

El cuadro de diálogo de configuración permite al autor del contenido definir el elemento de contenedor y cómo se comportará y aparecerá para un visitante de la página.
  • 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
      adaptable: define un contenedor como una cuadrícula adaptable a AEM
  • ID
    : utilice esta opción para definir el atributo de ID HTML que se aplicará al componente.
  • Color
    de fondo: se puede definir como valores RGB de forma libre o mediante 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

Cuadro de diálogo Diseño

El cuadro de diálogo de diseño permite al autor de la plantilla definir las opciones disponibles para el autor del contenido que utiliza el componente Contenedor.

Ficha Componentes permitidos

La ficha 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 al definir la política y las propiedades de un contenedor de diseño en el Editor de plantillas.

Ficha Componentes predeterminados

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

Ficha Configuración adaptable

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

Ficha Fondo

  • Imagen de fondo
    • Activar 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 solo muestras de color predefinidas para el color de fondo del contenedor.
      • Solo está disponible cuando se selecciona
        Activar 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
      Agregar
      para agregar una muestra de color predefinida. Una vez agregada, se agrega una entrada a la lista, que contiene las siguientes columnas:
    • Valor
      : defina el color manualmente mediante valores RGB
      • Toque o haga clic en el selector de color para seleccionar un color más fácilmente 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.

Ficha Estilos

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