Saltar al contenido principal

Forma

El elemento Forma es un componente contenedor visual versátil (similar a un div HTML) que permite crear fondos, paneles, cabeceras o agrupaciones visuales dentro del sinóptico. Es fundamental para el diseño estético y la organización de la interfaz.

Las propiedades marcadas con bolt permiten dinamización a partir de una expresión con variables.

General​

Configuración básica de identificación y posición.

Nombre (string)​

Identificador único del elemento.

Descripción (string)​

Texto descriptivo opcional.

X bolt (number)​

Posición horizontal en píxeles.

Y bolt (number)​

Posición vertical en píxeles.

Z bolt (number)​

Índice de profundidad (z-index).

Ancho bolt (number)​

Anchura del elemento en píxeles.

Alto bolt (number)​

Altura del elemento en píxeles.

Estilo​

Personalización visual del componente.

Oculto bolt (boolean)​

Hace invisible el elemento.

Color de fondo bolt (color)​

Color de relleno del contenedor.

Color de borde bolt (color)​

Color global del borde.

Color de borde [Superior/Inferior/Izquierdo/Derecho] (color)​

Color específico para cada lado.

Radio de borde bolt (number)​

Redondeo de las esquinas.

Ancho del borde bolt (number)​

Grosor global del borde en píxeles.

Ancho del borde [Superior/Inferior/Izquierdo/Derecho] (number)​

Grosor específico para cada lado.

Estilo de borde bolt (string)​

Tipo de trazo global (Sólido, Punteado, Oculto, etc.).

Estilo de borde [Superior/Inferior/Izquierdo/Derecho] (string)​

Tipo de trazo específico para cada lado.

Rotar bolt (number)​

Ángulo de rotación en grados.

Transición (string)​

Definición CSS de transición.

Punto de anclaje [Vert./Horiz.] (string)​

Define qué borde del elemento actúa como referencia fija de posición. Es muy útil cuando cambias dinámicamente el tamaño del elemento (ej: una barra de progreso): si anclas verticalmente "Abajo", al aumentar la altura el elemento crecerá hacia arriba, manteniendo su base fija en el sinóptico.

Relleno de fondo (object)​

Permite crear un efecto de llenado progresivo (0-100%) sobre el fondo de la forma. Se configura definiendo la Dirección, el Color, un Valor inicial y una Variable para dinamizarlo.

Ejemplo de uso: Visualizar el nivel de un tanque de agua. Configurando la dirección "De abajo a arriba", si la variable asociada vale 50, la forma se verá llena hasta la mitad con el color seleccionado.

Sombra (string)​

Permite seleccionar un nivel de sombra predefinido (Ninguna, Pequeña, Media, Grande).