Diseño de contenedor

Utiliza Diseños de contenedor para crear un diseño de aplicación complejo.

Cuando se añade un control de disposición de contenedores, se dispone por defecto de un único contenedor. Para añadir más contenedores simples, haz clic en el icono "+" que bordea los contenedores existentes.

Para volver a colocar un contenedor dentro del diseño, arrastra y suéltalo en la posición deseada.

Para cambiar el tamaño de los contenedores, arrastra la esquina del contenedor.

Para eliminar un contenedor, selecciónalo y utiliza la tecla Suprimir en tu teclado. Como alternativa, en la vista de árbol, haz clic con el botón derecho del ratón en el contenedor y selecciona Eliminar.

El control de diseño del contenedor tiene dos conjuntos de propiedades:

• Un conjunto para el diseño del contenedor

• Un conjunto para cada contenedor dentro del diseño

Nota:

Recomendamos utilizar los controles de Diseño de contenedor a nivel de página, para estructurar la página en diferentes secciones.

Para alinear y posicionar los controles dentro de una página, utiliza los controles de contenedor.

Importante: para facilitar el mantenimiento y la coherencia entre el tiempo de diseño y el tiempo de ejecución, evita anidar los diseños de contenedores.

Propiedades del diseño de contenedor

General

• Oculto: si es verdadero, oculta el control en tiempo de ejecución.

• Deshabilitado: si es verdadero, deshabilita el control en el tiempo de ejecución.

Events

No hay eventos.

Estilo

• Color de fondo: el color de fondo del diseño.
• Fuente: la familia de fuentes para el diseño de contenedor. Todos los contenedores del diseño comparten la misma familia de fuentes.
• Margen: establece el margen del diseño. De forma predeterminada, se establece un margen de 0px. Se combinan las propiedades de los márgenes superiores/inferiores e izquierdos/derechos. Estas propiedades se pueden separar utilizando el botón Enlace situado a la derecha de la sección Margen.
• Relleno: el relleno del diseño. De forma predeterminada, se establece un relleno de 0px. Se combinan las propiedades de los márgenes superiores/inferiores e izquierdos/derechos. Estas propiedades se pueden separar utilizando el botón Enlace situado a la derecha de la sección Relleno.
• Tamaño: el ancho y la altura del diseño. Por defecto, el Ancho se establece en 100px, mientras que la Altura se establece en auto, para permitir que el diseño se expanda en función de los contenedores que contiene.

Propiedades de contenedor

General

• Información sobre herramientas: información de la herramienta que se mostrará en el contenedor. Utilízalo para proporcionar información adicional sobre el control.

• Oculto: si es verdadero, oculta el control en tiempo de ejecución.

• Deshabilitado: si es verdadero, deshabilita el control en el tiempo de ejecución.

Events

• Seleccionado: configura lo que sucede cuando se hace clic en el contenedor.

Estilo

• Diseño: determina cómo se colocan los controles dentro del contenedor:

  • Horizontal/vertical: la orientación de los controles.
  • Alineación: la alineación de los controles dentro del contenedor.
  • Permitir ajuste: si se selecciona, ajusta los controles en el contenedor.

  • Permitir desplazamiento: si se selecciona, permite desplazarse dentro del contenedor.

• Color de fondo: el color de fondo del diseño del contenedor.
• Borde: establece el borde del control. Se pueden configurar el grosor, el color y el radio del borde.
• Fuente: la familia de fuentes para el diseño de contenedor. Todos los controles del contenedor comparten la misma familia de fuentes. Por defecto, el control hereda la familia de fuentes del contenedor principal inmediato, que se indica con la palabra clave "heredada".
• Margen: establece el margen del diseño. De forma predeterminada, se establece un margen de 0px. Se combinan las propiedades de los márgenes superiores/inferiores e izquierdos/derechos. Estas propiedades se pueden separar utilizando el botón Enlace situado a la derecha de la sección Margen.
• Relleno: el relleno del diseño. De forma predeterminada, se establece un relleno de 0px. Se combinan las propiedades de los márgenes superiores/inferiores e izquierdos/derechos. Estas propiedades se pueden separar utilizando el botón Enlace situado a la derecha de la sección Relleno.

• Avanzado: muestra las propiedades flexibles del control.

  • Base flexible: establece el tamaño original de un elemento flexible antes de que se distribuya o se elimine el espacio adicional (px, %, em, auto).

  • Crecimiento flexible : cuando hay espacio adicional disponible, este valor dicta cuánto debe crecer un elemento flexible en relación con el resto de los elementos.

  • Reducción flexible : cuando el espacio no es suficiente, este valor dicta cuánto debe reducirse un elemento flexible en comparación con los demás elementos.

    Para obtener más información, consulta la documentación de Mozilla Developer Network.