Voltapp 🇫🇷
Voltapp 🇪🇸
🎉 Home
Voltapp Introduction
CUSTOMIZE A TEMPLATE ⏱
Discover Templates
Create your Airtable
Connect your data
Publish your app
LEARN VOLTAPP
Discovery of the interface
Nodes
Graph
Variables
Custom the design
Placing elements
Design examples & Devices
Managing pages
Create dynamic content
Manage data with Airtable
Combine templates
CREATE YOUR 1rst APP
Dynamic content
Data & design creation
GO FURTHER
Webhooks integration (Make, Zapier…): ex Notion
Team work
Internationalization
Sovereign data
Formulas
REFERENCE
Voltapp Lexicon
Nodes
Event blocks
Action blocks
Control blocks
Expression blocks
Variables
HELP
FAQ
Find help
To be accompanied
How to do it with Voltapp
COMMUNITY
🔗 Our discord
🔗 Marketpad
Voltapp Updates
The Text Entry node will allow the user to enter a series of data into the app (their email or phone, for example).
Components
Input
Value
For the Input to work it is necessary to assign a variable to the value of the Input.
You just have to switch to Voltapp's graph mode and integrate two blocks "When change" and "Define value" then link the blocks together and their values together. Now you just have to switch back to the App mode and link the Value variable you have just created to the Input value. The user can then enter the desired text.
Type
You can choose the type of input: email, password, phone, ...
Placeholder
Value
The operation of Input is quite simple. You will see in the inspector the Placeholder property. This is the text that will be specified when no input has been made by the user yet (e.g. "your email" or "[email protected]").
Color
Allows you to determine the color of the displayed text.
Style
The style manages the general visual properties applied to this node.
Background
Control the background (image, color, or gradient) of the node.
Opacity
Control the opacity of the node.
Rounding
Controls the radius of the rounded outer corners of the node. You can set the radius for all corners (top left, top right, bottom left, bottom right) or for each corner individually.
Border
Controls the shape, color and thickness of the node's border.
- Thickness**: The thickness of the border. You can set the thickness for all borders (top, left, right, bottom) or for each one individually.
- Shape** : the style of the border.
- Color** : the color of the border.
Shadows
Allows you to add one or more shadows to a node. Each shadow is defined by :
- type** : whether the shadow is inside or outside the node box.
- x:** specifies the horizontal distance. Negative values place the shadow to the left of the element.
- y** : specifies the vertical distance. Negative values place the shadow above the element.
- blur** : the larger this value, the more blurred the shadow becomes, so it is larger and lighter.
- Dispersion**: positive values make the shadow expand and grow, negative values make the shadow shrink.
Blur
Applies blur to the background of the node only, to create an iOS-style glass effect. The larger the value, the greater the blur.
Layout
The layout allows you to place and position your node in relation to its siblings (those of the same parent node).
Width
Controls the width of the node.
- px** : defines the width of the node in pixels.
- %** : sets the width of the node as a percentage of the width of its parent.
- fit**: automatically adjusts the width of the node according to the width of its content.
- grow** : specifies how much of the parent's remaining space should be allocated to the node.
Height
- px** : defines the height of the node in pixels.
- % : defines the height of the node as a percentage of the width of its parent.
- fit** : automatically determines the height of the node according to the width of its content.
- grow** : specifies how much of the parent's remaining space should be allocated to the node.
Top
Controls the top margin between the node and its neighbor.
- px** : defines the margin in pixels.
- %** : sets the margin in percentage of its parent's width.
- auto** : automatically sets the margin to the remaining space in its parent. If there are several nodes with the upper margin set to auto, the remaining space is divided equally between each node.
Right
Controls the right margin between the node and its neighbor.
- px** : defines the margin in pixels.
- %** : sets the margin as a percentage of its parent's width.
- auto** : automatically sets the margin to the remaining space in its parent. If there are more nodes whose top margin is set to auto, the remaining space is divided equally between each node.
Down
Controls the bottom margin between the node and its neighbor.
- px** : sets the margin in pixels.
- %** : sets the margin in percentage of its parent's width.
- auto** : automatically sets the margin to the remaining space in its parent. If there are more nodes with a margin greater than auto, the remaining space is divided equally between each node.
Left
Controls the left margin between the node and its neighbor.
- px** : sets the margin in pixels.
- %** : sets the margin as a percentage of its parent's width.
- auto** : automatically sets the margin to the remaining space in its parent. If there are more nodes with a higher margin set to auto, the remaining space is divided equally between each node.
Shrinkage
Shrinkage factor of the node's children. If set to 0, the node cannot shrink.
Hide
Show or hide the node.
Internal margin