# Number Property

The Number Property allows you to configure a number property such as font size, padding, width etc.&#x20;

You can input a Name, decide whether it should be Responsive or not, set a Default value, and a Minimum, a Maximum or Step.&#x20;

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.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FsZVf5GmXtjVP0G6ixtvl%2FScreenshot%202023-09-29%20at%2010.29.00.png?alt=media&#x26;token=1c00afc4-499e-41ad-bb98-70f8595e79a1" alt=""><figcaption></figcaption></figure>

## Connect&#x20;

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.

{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}

The Number Property needs to be connected for it to be applied to the canvas.&#x20;

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FkdVXDFrcbffXfF3oDU1j%2FScreenshot%202023-09-29%20at%2010.31.39.png?alt=media&#x26;token=e8dc1a42-f10a-4e7e-a61d-bf2666248db9" alt=""><figcaption></figcaption></figure>

* In the navigator, select the required component block.

{% hint style="info" %}
The block selected must accept a Number property.
{% endhint %}

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.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FXOaNQfyPLZoPO1zhK1hp%2FScreenshot%202023-09-29%20at%2010.35.25.png?alt=media&#x26;token=b0a4db00-51cd-483b-81de-b794612a8080" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The customisable variables that can be used for the Number Property will have a Component icon attached.
{% endhint %}

* 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".

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F3jCgekAFES9sqAtxFE9m%2FScreenshot%202023-09-29%20at%2010.40.36.png?alt=media&#x26;token=a12df3f9-1830-4f57-b0b1-8778ef10f57d" alt=""><figcaption></figcaption></figure>

When you are in "Customise",  the Number property will be visible in the Block Inspector.&#x20;

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fo6xphftfJ3EWEd6hJU32%2FScreenshot%202023-09-29%20at%2010.42.59.png?alt=media&#x26;token=d55efee9-199d-4715-8350-53d01fc6b695" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fmk4Xs2y1YuBGwN0ql8Cb%2FScreenshot%202023-09-29%20at%2010.45.48.png?alt=media&#x26;token=8a871b1e-5094-46b2-93ac-50392104c5dc" alt=""><figcaption></figcaption></figure>

## Name

In the right hand panel of the Component Properties modal, input label Name.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FRCydxdcHv8pxulLc25vT%2FScreenshot%202023-09-29%20at%2010.47.57.png?alt=media&#x26;token=85ab7b6c-417b-4ce5-b381-087069f9705f" alt=""><figcaption></figcaption></figure>

The required Name Label will now be visible in the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FXjNuBhjXNQVptYL6Wai8%2FScreenshot%202023-09-29%20at%2010.53.43.png?alt=media&#x26;token=38a1ec2a-759a-4681-ad1d-d260dc7b94ad" alt=""><figcaption></figcaption></figure>

## Default

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.

## With Unit Toggle

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.&#x20;

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FPnEBKwISDXHtUE8l1MWs%2FScreenshot%202023-09-29%20at%2010.58.22.png?alt=media\&token=62b1232e-b9c5-4515-aa9b-60d65d7f8e97)

For example, "With Unit" is toggled on for Text Size .

* Input a suitable default Number as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FmJsVuzlIKGlPLIUJzuv4%2FScreenshot%202023-09-29%20at%2011.03.07.png?alt=media&#x26;token=cc8d9de0-78bf-4cdd-9099-d71f1ff4fcdb" alt=""><figcaption></figcaption></figure>

The Default Number property (in this case Text Size) is now applied to the Canvas.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FsVFpS1lOneAIgO4SOFC2%2FScreenshot%202023-09-29%20at%2011.06.49.png?alt=media&#x26;token=f5e07067-13bd-40ef-8ca2-c5eebb9efa91" alt=""><figcaption></figcaption></figure>

## Minimum

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.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FJZ7qUzprypD6G7eDswhU%2FScreenshot%202023-09-29%20at%2011.09.44.png?alt=media\&token=fd15e5d0-c12c-4577-9eb1-ac30851eca7b)

The Number component value cannot go below the set Minimum value.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FFdch6iUOGHkvo3mbvj58%2FScreenshot%202023-09-29%20at%2011.11.20.png?alt=media&#x26;token=043c1ea0-b606-40b7-a6ba-a54e49fc4fac" alt=""><figcaption></figcaption></figure>

## Maximum

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.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F7xYCmix7QkEMlqEZm2zG%2FScreenshot%202023-09-29%20at%2011.13.03.png?alt=media\&token=7008f655-c2dd-41e5-8330-b769194bd761)

The Number property value cannot go above the set maximum value.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FEippfeLMipsjwdl2j82q%2FScreenshot%202023-09-29%20at%2011.14.20.png?alt=media&#x26;token=2326f972-b8a2-4b8c-9391-245a85386822" alt=""><figcaption></figcaption></figure>

## Step

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.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F4DabkehlBClnEIydMPaR%2FScreenshot%202023-09-29%20at%2011.17.46.png?alt=media\&token=eba21e71-6bd0-499c-8299-940f38d62154)

## Responsive

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.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FTZhH7MM9305VVfUn6zYb%2FScreenshot%202023-09-29%20at%2011.20.05.png?alt=media\&token=a38311ea-ae05-498e-9cb9-f60863139368)
