Properties Panel
Right Hand Side Panel Of Blup

Properties Panel

This is one of the most important panels. It consists of related properties for the currently selected item in the designer. From this panel, you can modify the properties of your widgets present in the designer. This panel changes according to what you have selected for example if you selected the rectangle then the properties you will see are different if you have selected the text then the properties you will see are different.
Now, let's go over the properties of each widget that you can select.

Page or Mobile Canvas Properties

If you have selected the page or mobile canvas then there are only a few properties that you can change

Background colour

Through this property, you can give the background colour to the whole page or mobile canvas. This includes the same colour or you can choose different types of gradients.
There is also a checkbox associated with the properties, if this checkbox is checked only then your colour or gradient is applied otherwise they are not applied.

Rectangle Properties

if you have selected the rectangle then there are completely different sets of properties available on the properties. Let's go over one by one.

Convert To List

This button in the properties will convert the rectangle or widget into a list [list or listview is a collection of repetitive items/widgets, and these lists are scrollable].

Is Hide checkbox

this checkbox helps you to hide the currently selected widget, if the checkbox is hidden the widget is also hidden if the checkbox is unchecked then the widget is visible.
Note – if you have hidden multiple widgets on a single screen and you wanted to see them all at one time then you can see them with the help of the β€œUn-Hide widget of current Page” button present in the status bar.

Width and Height

This property helps you to assign the width and height manually from the input box present.

Padding

this section consists of four types of padding for each side before jumping directly into properties let's understand what padding is
Padding – it is a space immediately surrounding an element within its cell.it can be given from all four directions.

Padding left

this property helps you to give left padding, you can use the input box provided to put the value.

Padding Right

this property helps you to give the right padding, you can use the input box provided to put the value.

Padding Top

this property helps you to give top padding, you can use the input box provided to put the value.

Padding Bottom

this property helps you to give bottom padding, you can use the input box provided to put the value.

Image Fit Dropdown

This drop-down helps you to define how you wanted to put the image inside the rectangle, for example, whether the image is going to take up the complete space, or it will only take is required.

Fill

This property helps you provide background colour/gradient to the rectangle that you have created to choose the colour just click on the small rectangle next to fill text and provide or choose any colour.
There is also a checkbox associated with the property and only if the checkbox is checked then only the colour/gradient that you have chosen is applied or otherwise, it's not going to apply to the property.

Radius

This property helps you to define the corner radius. This help helps you to round the corner from the rectangle as per the value given in the input box.

Border

This helps you to apply colour and width to the border of the rectangle. In order, o apply the colour to the border just click on the colour rectangle present next to broader text and for width input the value in the input box. And similar o fill property this also has a checkbox that helps you to apply property easily or not.

Shadow

This property helps you to apply shadow to your rectangle, and shadow is only applied when the checkbox is checked. There are three main input boxes present with this property
a. X-axis - this input box helps you move your shadow effect in x-direction [horizontal].
b. Y-axis – this input box helps you move your shadow effect in y-direction [vvertical].
c. B – this input box helps you to expand the effect of shadow, If the value is smaller then the shadow is concentrated into a small area and vice versa.

List Properties

Undo List

this button helps you to convert the list back into the widget that you have created in the beginning.

Item Count

Item count property helps you to define the total number of items that we wanted to have on the list.

Grid Row Count

Through this property, we can convert the list into a grid list. If the value of this property is one then it is a simple list but if we increase the value of let's say to 2 it becomes the grid list with two-column.

Item Count

Item count property helps you to define the number of the item can exist in the list. This property helps you to provide the total number of items that we wanted in a list.

Grid Row Count

This property helps you create a grid out of the list, with the helps of this property we can define the number of columns that we wanted to have in the grid.
Note – If the value is 1 of this property it means that it’s a simple list, but if we increase the value of the property it becomes the grid.

Item Spacing

This property helps you to define the spacing [vertical height] between the list items.
Higher the value of item spacing greater the vertical height between the item in the list and vice versa.

Grid Spacing

This property helps you define the horizontal spacing between the grid items.
Note - The property only going to works when we have a grid, not a list.

Item Aspects Ratio

Aspects ratio is the ratio between the width and height of the item, the greater the value of this property smaller the vertical spacing between them and the smaller the item gets.

Is Horizontal Scroll

This checkbox converts the vertical list into a horizontal list which means that instead of list items scrolling vertically they now scroll horizontally.

Is Hide

This property helps you to hide the complete list, if this checkbox is checked list is hidden.

List Type

this property consists of two options which are
  1. 1.
    Simple list – this type of list consists of multiple items on a single page.
  2. 2.
    On Item List – this type of list consists of only a single item per page.

Text Properties

When you select the text all the properties that you see in the properties panel are related to the text.
Let's go over each property one by one.

Convert to List

Similar to a rectangle you can also convert text to a list.

Text property

This is one of the secondary properties available for the text widget instead of putting value from the text toggle you can also you this property to input value inside the text that is present on the page or mobile canvas.

Font Size

This property helps you to define the font size of the text that you have selected.

Font Color

As the name suggests this property helps you to define the font colour, to provide colour to the text you can use the colour rectangle.

Padding

it is a space immediately surrounding an element within its cell.it can be given from all four directions.
Padding left – this property helps you to give left padding, you can use the input box provided to put the value.
Padding Right – this property helps you to give the right padding, you can use the input box provided to put the value.
Padding Top – this property helps you to give top padding, you can use the input box provided to put the value.
Padding Bottom – this property helps you to give bottom padding, you can use the input box provided to put the value.

Line Height

This property helps you to define a height between the text. The bigger the number bigger will be height and if the number is smaller then the height is also going to be smaller.

Letter spacing

This property helps you to define the spacing between the letters of the text that you have defined.

Font

This property consists of two drop-down which helps you to define the font type and font style of the currently selected text.

Font type

this dropdown helps you to select between the font type for the text [currently you can only select the font that is available on the dropdown menu but in the future, we are going to introduce a feature so that you can define any font type for text].

Font Style

This dropdown menu helps you to select font styles, most of the majorly used are already defined in the dropdown menu.

Text Alignment

this property helps you to define the text alignment, there is 4 option available to choose from.
Let's go over each one by one
a. Left align - this option aligns the text left.
b. Right align – this option aligns the text to the right.
c. Center Align - this option aligns the text left.
d. Justify align – this option helps you to space is added between words so that both edges of each line are aligned with both margins.

Max Line

This property helps you to define the max line to which your text can expand, for example, if you define maxline value as 2 then your text can only take up 2 lines.

Is Ellipsis

This property helps you to convert the text that is expanded in multiple lines to convert to a single line and show the rest of the text by β€œβ€¦.” form.

Is Text Field

This property helps you to convert to text field [input box are sometimes also called text field], these are used to take input from users like a password or email id for login into the app itself.
As soon as you checked this property you can see that your text is converted into an input box and several other properties related to the input box or text field appears

TextField Properties

Is Adjust with keyboard

This property helps your input box to adjust with a keyboard which means that when your input box is present on the bottom of the screen and you open the keyboard to input in the field it got hidden below the keyboard to avoid such a situation we used this property.

Is Paragraph Editor

TextField Width and Height

Width and Height This property helps you to assign the width and height manually from the input box present.

Padding

this section consists of four types of padding for each side before jumping directly into properties let's understand what padding is
Padding – it is a space immediately surrounding an element within its cell.it can be given from all four directions.
Padding left – this property helps you to give left padding, you can use the input box provided to put the value.
Padding Right – this property helps you to give the right padding, you can use the input box provided to put the value.
Padding Top – this property helps you to give top padding, you can use the input box provided to put the value.
Padding Bottom – this property helps you to give bottom padding, you can use the input box provided to put the value.

Background Color

This property helps you to give background colour to the input box, to give colour just click on the colour rectangle box and choose the colour.

Hint text

This property helps you to define the hint text for the input box. Hint text provides useful information on what text they can put into the input box.

Focused Border Color

An input Box Is said to be focused when the user is inputting the text inside it, So as the name suggests this property helps you to define the border colour when the input box is in a focused state.

UnFocused Border Color

An input Box Is said to be unfocused when the user is not inputting the text inside it, So as the name suggests this property helps you to define the border colour when the input box is in an unfocused state.

Cursor Properties

This property helps you to change the look and feel of the cursor which appears while typing inside the input.
Width – this cursor property helps you to define the width of the cursor
Height – this cursor property helps you to define the height of the cursor.
Radius – this cursor property helps you to define the radius of the cursor.

Music to go with.

Lofi music
​