i

Please enable JavaScript to view this site.

Documentación 8.5

Las páginas se dividen en secciones donde se pueden incluir elementos. De manera predeterminada la página tiene una sección definida.

Operaciones

Agregar

 

Permite incorporar una nueva sección haciendo clic en el ícono AgregarSeccion de la sección existente.

Modificar Tamaño

 

Se puede modificar el alto de la sección desde los bordes superior o inferior, haciendo clic sobre los mismo y arrastrándolos. Otra forma de modificar su tamaño es desde el panel de estructura de la sección.

Mover

 

Una sección se puede mover utilizando la funcionalidad de capas.

Propiedades de Estructura

 

El panel de propiedades de estructura de una sección se abre al seleccionar el ícono PropiedadesEstructura del menú contextual.

 

 

MPA-PropiedadesEstructura-001

Tamaño

 

MPA-PropiedadesTamaño-001

 

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’.

 

Las secciones no permiten modificar la propiedad Ancho.

Tipo de Posición

 

MPA-PropiedadesTipoPosicion-003

 

Valores Posibles

 

Predeterminado: El elemento tiene una posición relativa respecto al elemento superior donde fue ubicado (contenedor o sección).

Pegadizo: Se encuentra disponible solamente en las secciones, permite que la sección permanezca visible mientras los usuarios continúan desplazándose. Al principio, se ve la sección donde se ha posicionado en la página, pero se "pega" a la pantalla a medida que se avanza hacia abajo.

Márgenes

MPA-PropiedadesMargenes-001

 

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.

Avanzado

 

MPA-PropiedadesAvanzado-001

 

Nombre

Es el nombre que se utiliza para referenciar a la sección durante el modelado.

 

Identificador

Identifica unívocamente a la sección. Se utiliza en el SDK de Javascript.

Propiedades Estilo

 

El panel de propiedades de estilo de una sección se abre al seleccionar el ícono PropiedadesEstilo del menú contextual.

 

 

MPA-PropiedadesEstilo-001

Espacio de Relleno

MPA-PropiedadesEspacioRelleno-001

 

Todas la propiedades de espacio de relleno permiten crear un espacio entre los bordes (superior, inferior, laterales) del elemento y su contenido. El espacio de relleno configurado es hacia adentro, mientras que el margen se configura en relación a un elemento superior. 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).

Imagen de Fondo

 

MPA-PropiedadesImagenFondo-001

 

Permite agregar una imagen de fondo a la sección.

 

Seleccionada

La imagen puede subirse desde el equipo donde se está modelando.

 

Tamaño

 

Valores Posibles

 

Cubrir

Contenido

Auto

 

Repetir

 

Valores Posibles

 

Repetir

Repetir Hor.

Repetir Vert.

Espaciado

Redondeado

No Repetir

 

Posición Horizontal y Vertical

 

Valores Posibles

 

Centro

Izquierda

Derecha

Color de Fondo

 

Permite modelar un color de fondo para el elemento, el mismo puede ser sólido o gradiente y para cada uno se definen diferentes propiedades.

 

Sólido

 

 

MPA-PropiedadesColor-001

 

Para la opción sólido, además de seleccionar el color desde una paleta se puede definir el grado de transparencia.

 

 

MPA-PropiedadesEstilo-018

 

 

Gradiente

 

MPA-PropiedadesEstilo-020

 

Para la opción gradiente, además de seleccionar el color desde una paleta se puede definir su opacidad y su intensidad según el ángulo seleccionado.

 

 

MPA-PropiedadesEstilo-019

Bordes

MPA-PropiedadesBordes-001

 

Permite definir el estilo de los bordes. Por cada uno se define el tipo, ancho, color y opacidad, esta última en porcentaje.

Reglas Embebidas

 

El panel de propiedades de reglas embebidas de una sección se abre al seleccionar el ícono MPA-IconoRegla del menú contextual.

 

 

MPA-PropiedadesReglas-001

 

Propiedades

 

Reglas

Se pueden definir reglas embebidas de comportamiento, validación y cálculo, asociadas a una sección, mediante el uso del asistente (ctrl + espacio).

65S4_img6 Muestra ejemplos de sintaxis para escribir las reglas.

 

65S4_v2_img9

Visible

Indica si la sección es visible. Si no se marca esta propiedad, la sección no se visualiza en la página.
toggles_img1  Visible (predeterminado)   toggles_img3 No visible

65S4_img11 Abre un área de edición donde se puede definir una regla para determinar la condición de visibilidad. Si se define una regla, el ícono se visualiza con bordes color celeste.

 

 

Operaciones al definir la regla:

 

icon-mod-proc-jxxf3489fhdj

Guarda la regla nueva o modificada

icon-mod-proc-d6f4xxx6dfhjfdj

Cancela la operación

 

Operaciones una vez definida la regla:

 

icon-mod-proc-xxcf5hfs89fhdj

Edita la regla existente

iconoTACHO_AZUL

Elimina la regla

Eventos

 

Las secciones permiten utilizar diferentes eventos.

 

 

Evento

Descripción

onMouseIn()

Se ejecuta cuando el cursor se posiciona sobre el elemento.

onMouseOut()

Se ejecuta cuando el cursor se desplaza fuera del elemento.

onClick()

Se ejecuta al hacer clic en el elemento.

onDoubleClick()

Se ejecuta al hacer doble clic en el elemento.

onInit()

Se ejecuta antes de cargar el elemento.

afterViewInit()

Se ejecuta después de presentar el elemento.

onViewportEnter()

Se ejecuta cuando el elemento es visible.

onViewportLeave()

Se ejecuta cuando el elemento deja de ser visible.

Envianos tu comentario
Compartir en X Compartir en Linkedin Enviar por Email Imprimir