Voltapp 🇺🇸
Voltapp 🇫🇷
🎉 Bienvenido
Introducción a Voltapp
PARA EMPEZAR ⏱
Descubrir las plantillas
Crear su Airtable
Conectar sus datos
Publicar su aplicación
APRENDER VOLTAPP ▶️
Descubrir la interfaz
Los nodos
El gráfico
Las variables
Personalizar el diseño
Colocar los elementos
Ejemplos de diseño y dispositivos
Gestionar páginas
Crear contenido dinámico
Gestionar sus datos
Combinación de plantillas
CREAR SU 1ª APP
Contenido dinámico
Creación y diseño de datos
SIGUE CON LA MISMA
Integración de Webhooks (Make, Zapier...): ex Notion
Trabajar en equipo
Internationalisation
Servidor de datos privado: Supabase
Las fórmulas
MÁS AYUDA
FAQ Voltapp
Estar acompañado
Cómo hacerlo con Voltapp
Acceso a la ayuda
REFERENCIA
Léxico Voltapp
Nodos
Bloques de eventos
Bloques de acciones
Bloques de control
Bloques de expresión
Variables
COMUNIDAD
🔗 Nuestro Discord
🔗 Nocode Hackers Es
Actualizaciones de Voltapp
El nodo Interruptor permite asociar eventos a sus dos posiciones, a la vez que personaliza los aspectos visuales.
Componentes
Toggle
Valor
En el inspector de la parte derecha de la pantalla puede establecer primero el valor de la variable para su interruptor eligiendo "true" o "false".
Para asignar una variable al botón de conmutación es necesario entrar en el modo de script haciendo clic en los tres bloques de la parte superior izquierda del inspector.
Una vez en modo script, añade el bloque de eventos "change". A continuación, arrastre su parámetro "valor" y seleccione "promover a valor" en la parte inferior de la ventana que aparece en la pantalla.
Para cambiar el nombre de su variable, vaya a la pestaña "variables" de su inspector, haga clic en la variable en su lugar. A continuación, puede cambiar su nombre, valor, etc.
Para terminar de configurar su interruptor, vuelva al modo de diseño haciendo clic en los 4 cuadrados de la parte superior izquierda del inspector (1). Una vez en el menú "config" del inspector (2), haz clic en el icono de enlace Toggle value (3) y asigna la variable que acabas de crear (4).
Color
A continuación, puede determinar el color de la barra cuando se activa el conmutador en "color".
Disabled
Entonces el color de la barra cuando el interruptor está apagado en "off".
Botón
Por último, también puede establecer el color del botón en "Botón".
Estilo
El estilo gestiona las propiedades visuales generales aplicadas a este nodo.
Antecedentes
Controla el fondo (imagen, color o degradado) del nodo.
Opacidad
Controla la opacidad del nodo.
Redondeo
Controla el radio de redondeo de las esquinas exteriores del nodo. Puede establecer el radio para todas las esquinas (superior izquierda, superior derecha, inferior izquierda, inferior derecha) o para cada esquina individualmente.
Border
Controla la forma, el color y el grosor del borde del nodo.
- Grosor**: El grosor del borde. Puede establecer el grosor de todos los bordes (superior, izquierdo, derecho, inferior) o de cada uno de ellos individualmente.
- Forma**: el estilo del borde.
- Color**: el color del borde.
Shadows
Permite añadir una o varias sombras a un nodo. Cada sombra está definida por :
- tipo** : si la sombra está dentro o fuera de la caja del nodo.
- x:** especifica la distancia horizontal. Los valores negativos colocan la sombra a la izquierda del elemento.
- y**: especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento.
- Desenfoque**: cuanto mayor sea este valor, mayor será el desenfoque, por lo que la sombra se hace más grande y más clara.
- Dispersión**: los valores positivos hacen que la sombra se expanda y crezca, los valores negativos hacen que la sombra se reduzca.
Blur
Aplica el desenfoque sólo al fondo del nodo, para crear un efecto de cristal al estilo de iOS. Cuanto mayor sea el valor, mayor será el desenfoque.
Layout
El diseño le permite colocar y posicionar su nodo en relación con sus hermanos (los del mismo nodo padre).
Width
Controla la anchura del nodo.
- px**: Establece la anchura del nodo en píxeles.
- Define la anchura del nodo como un porcentaje de la anchura de su padre.
- fit**: ajusta automáticamente la anchura del nodo en función de la anchura de su contenido.
- grow**: especifica cuánto espacio restante del padre debe asignarse al nodo.
Altura
- px**: establece la altura del nodo en píxeles.
- %: establece la altura del nodo como un porcentaje de la anchura de su padre.
- fit**: determina automáticamente la altura del nodo en función de la anchura de su contenido.
- grow**: especifica cuánto espacio restante del padre debe asignarse al nodo.
Top
Controla el margen superior entre el nodo y su vecino.
- px** : define el margen en píxeles.
- %: establece el margen en porcentaje del ancho de su padre.
- auto**: establece automáticamente el margen al espacio restante en su padre. Si hay varios nodos con el margen superior fijado en automático, el espacio restante se divide en partes iguales entre cada nodo.
Right
Controla el margen derecho entre el nodo y su vecino.
- px**: establece el margen en píxeles.
- %: establece el margen en porcentaje del ancho de su padre.
- auto**: establece automáticamente el margen al espacio restante en su padre. Si hay más nodos cuyo margen superior está configurado como automático, el espacio restante se divide en partes iguales entre cada nodo.
Bottom
Controla el margen inferior entre el nodo y su vecino.
- px**: define el margen en píxeles.
- %**: establece el margen como un porcentaje del ancho de su padre.
- auto**: establece automáticamente el margen al espacio restante de su padre. Si hay más nodos con un margen mayor que auto, el espacio restante se divide en partes iguales entre cada nodo.
Left
Controla el margen izquierdo entre el nodo y su vecino.
- px**: establece el margen en píxeles.
- Define el margen como un porcentaje del ancho de su padre.
- auto**: establece automáticamente el margen al espacio restante en su padre. Si hay más nodos con un margen más alto establecido en auto, el espacio restante se divide en partes iguales entre cada nodo.
Shrinkage
Factor de encogimiento de los hijos del nodo. Si se establece en 0, el nodo no puede encogerse.