Number Property
Last updated
Last updated
The Number Property allows you to configure a number property such as font size, padding, width etc.
You can input a Name, decide whether it should be Responsive or not, set a Default value, and a Minimum, a Maximum or Step.
You can also toggle "With Unit" on or off if you want to specify a unit.
Open the Components Properties modal by clicking the "+" icon.
Select the Number Property you wish to configure.
We need to open the Component in the Navigator in order to see the individual blocks.
Select the Component to which you want to connect the Number Property.
In the Tool Bar or Block Inspector, select "Modify" to view individual component blocks.
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
The Number Property needs to be connected for it to be applied to the canvas.
In the navigator, select the required component block.
The block selected must accept a Number property.
For example, we want to add a text size property.
With the appropriate block selected, click the Component icon under Size in the Block Inspector.
The customisable variables that can be used for the Number Property will have a Component icon attached.
In the Block Inspector, click the Number property (in this example Text Size) to open the Component Properties modal.
Select the Numbers property to be customised, in this example "Text Size".
When you are in "Customise", the Number property will be visible in the Block Inspector.
You can now adjust the Number property from the Block Inspector as shown in the example below.
This will adjust the Number property on the Canvas.
In the right hand panel of the Component Properties modal, input label Name.
The required Name Label will now be visible in the Block Inspector.
Allows you to set a suitable default number to your component.
Open the Components Properties.
Select required Number property.
Open Settings tab.
Input suitable default number in Default field.
Some Number properties require a unit (such as Text Size) and others do not require a unit (such as Slides).
Toggle On/Off With Unit as required.
For example, "With Unit" is toggled on for Text Size .
Input a suitable default Number as required.
The Default Number property (in this case Text Size) is now applied to the Canvas.
The Minimum property allows you to set a minimum value to your Number property.
In the Components Properties modal, select the required Number property.
Set Minimum value as required.
The Number component value cannot go below the set Minimum value.
The Maximum property allows you to set a Maximum value to your Number property.
In the Components Properties modal, select the required Number property.
Set Maximum value as required.
The Number property value cannot go above the set maximum value.
You can set a Step parameter to determine the size of the intervals.
With the required Number property selected, set Step size value as required.
Toggle on or off Responsive as required depending on whether or not you want the number to be responsive or not.
Select required number property.
Toggle on Responsive as required.
Select required screen size.
