i
Diseño
Este elemento es una estructura compuesta por un conjunto de ítems y permite estructurarlos en base a diferentes estilos: columna, fila, franja y mosaico. Dichos ítems son contenedores, lo que permite incorporarles otros elementos. Estos elementos pueden moverse junto con cada ítem cuando se redimensiona la estructura de diseño.
Las propiedades del elemento se encuentran representadas por íconos en su menú contextual, donde también se encuentran disponibles sus operaciones.
Subtipos
•Columna
•Fila
•Franja
•Mosaico
Propiedades de Estructura
El panel de propiedades de estructura de un elemento se abre al seleccionar el ícono del menú contextual.
Alineamiento
Permite alinear el elemento al seleccionar uno de los iconos disponibles.
• Alinear a la izquierda.
• Alinear al centro horizontal.
• Alinear a la derecha.
• Alinear arriba.
• Alinear al centro vertical.
• Alinear abajo.
Tamaño
Todas las propiedades de tamaño pueden estar expresadas en píxeles (px), porcentaje (%), ancho de la ventana de visualización (vw) y altura de la ventana de visualización (vh). Adicionalmente para las propiedades Ancho y Alto se suma la opción “auto’.
Tipo de Posición
Valores Posibles
•Predeterminado: El elemento tiene una posición relativa respecto al elemento superior donde fue ubicado (contenedor o sección).
•Fijo: Fija el elemento a la página para que siempre esté visible en la misma posición. Permite aumentar la visibilidad de contenido importante.
Acoplamiento
Determina la posición vertical y horizontal de los elementos dentro de la sección de la página o del contenedor, cuando se cambia el tamaño de la pantalla.
Si bien el modelador acopla el elemento automáticamente al ser agregado, también se puede configurar, permitiendo acoplarlo a cualquiera de los lados (a la parte superior, inferior, izquierda, derecha o incluso en el centro de la sección o contenedor en el que se encuentra). Esto se realiza haciendo clic en las flechas o en el centro del lado al cual se quiere acoplar.
Márgenes
Permite definir la distancia de los elementos hacia los bordes de su elemento superior. El comportamiento de los márgenes dependen del acoplamiento del elemento. Puede ser expresado en píxeles (px), porcentaje (%), ancho de la ventana de visualización (vw) y altura de la ventana de visualización (vh).
Arriba
Distancia hacia el borde superior del elemento de mayor jerarquía.
Abajo
Distancia hacia el borde inferior del elemento de mayor jerarquía.
Izquierda
Distancia hacia el borde izquierdo del elemento de mayor jerarquía.
Derecha
Distancia hacia el borde derecho del elemento de mayor jerarquía.
Permite que el valor ingresado en uno de los márgenes se copie en los otros automáticamente.
Permite indicar diferentes valores para cada uno de los márgenes.
Avanzado
Nombre
Es el nombre que se utiliza para referenciar el elemento durante el modelado.
Identificador
Identifica unívocamente al elemento. Se utiliza en el SDK de Javascript.
Propiedades de Estilos
El panel de propiedades de estilo de un elemento se abre al seleccionar el ícono del menú contextual.
Espacio de Relleno
Todas la propiedades de espacio de relleno permiten crear un espacio entre los bordes (superior, inferior, laterales) y los elementos inferiores. Puede ser expresado en píxeles (px), porcentaje (%), ancho de la ventana de visualización (vw) y altura de la ventana de visualización (vh).
Separación de Items
Define la separación entre los ítems del diseño.
Permite que el valor ingresado en uno de los espacios de relleno se copie en los otros automáticamente.
Permite indicar diferentes valores para cada uno de los espacios de relleno.
Propiedades de Configuración
El panel de propiedades de configuración de un elemento se abre al presionar el ícono del menú contextual.
Estilos
Indica la forma en que se agrupan los ítems dentro del diseño.
Columna
Los ítems se ubican en forma vertical dentro del diseño.
Fila
Los ítems se ubican en forma horizontal dentro del diseño.
Mosaico
Combina la ubicación vertical y horizontal de los ítems según su tamaño dentro del diseño.
Franja
Los ítems se ubican en forma horizontal dentro del diseño. Permite hacer scroll.
Proporción de los ítems
Al presionar el botón “Igualar” se ajusta el tamaño de los ítems en forma proporcional dentro del diseño.
Lista de Items
Se visualizan los ítems contenidos en el diseño y pueden cambiarse de posición arrastrando los mismos dentro de la lista.