Button
represents a clickable element that can be used on forms or anywhere on the page that needs a standard, simple button to apply.
Appearance
Background color : The option to modify the background of your control allows you to personalize its appearance. When you click on it, a window will open that will allow you to select from various color variables, such as your primary or secondary tone, or even enter a specific hexadecimal code. In addition, you will find other settings that will allow you to further customize the background of your control.
Property to modify : "backgroundColor"
Data to send : To select a color value, choose an option within the "Color value" section in the entry options, or alternatively, send the following object: {type: "custom", value: "(hexadecimal color code)"}.
Text color :The option to modify the text color of your control allows you to personalize its appearance. When you click on it, a window will open that will allow you to select from various color variables, such as your primary or secondary tone, or even enter a specific hexadecimal code for a custom color.
Typography
Font size : This option allows you to adjust the font size of your control by entering a numeric value represented in pixels in the "custom" mode. You can also activate the "global" option by clicking on the lock-shaped icon, which will turn gray with the label "global". This way, it will have the size that you have set in the default options of the style bar as default. You can switch back to the "custom" option by changing the value or clicking on the icon again until it turns blue with the label "custom".
Style :
Text align : "This option allows you to align your paragraphs in different ways:
Centered text (centrally aligns your text).
Justified (aligns the text on both edges).
Left-aligned (aligns your text towards the left edge of your control).
Right-aligned (aligns the text towards the right edge of your control)."
Dimentions
Size : This option allows you to configure the size of your control both in height and width. It has two measurement systems: percentage (%) and pixels (px).
In the percentage system, you can enter a numerical value from 0 to 100, and the size of the control will automatically adjust to the percentage indicated with respect to the size of the container that contains it. For example, if you indicate a size of 50%, the control will occupy half of the screen, regardless of the size of the device. To activate this option, make sure that the corresponding icon is in blue.
On the other hand, in the pixel system, you can indicate a numerical value to determine the size of the control in pixels. This measurement will remain constant, regardless of the dimensions of the device. You can indicate any number of pixels between 0 and the maximum allowed. To activate this option, make sure that the corresponding icon is in gray.
Margins
Borders
Border Width: This option allows you to add a border to your control, from the outside to the inside of it. You can modify the border on the top, right, bottom, and left sides of the control. You can adjust each of them individually or anchor them to have the same proportion every time you modify one. The value entered is numerical and expressed in pixels.
With these options, you can customize the border of your control and adjust it to your design needs.
Border Radius: This option allows you to modify the rounding of the corners of your controls. You can adjust the top-right corner, bottom-right corner, bottom-left corner, and top-left corner. You can modify each of them individually or anchor them to have the same proportion every time you modify one. The value entered is numeric and expressed in pixels. The higher the value, the greater the rounding of the corner.
With these options, you can customize the rounding of the corners of your control and adjust it to your design needs.
Border color : The option to modify the color of your control's border gives you the possibility to personalize its appearance. When you click on this option, a window will open that will allow you to choose from various color variables, such as your primary or secondary tone, or even enter a specific hexadecimal code. Additionally, you will find other settings that will allow you to further customize the background of your control.
Border style: This option allows you to modify the border style of your control, offering you three different options to choose from: "dotted", "dashed", and "solid".
Última actualización
