# Layers

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FS5ZRNIdXotvFCVEodnEG%2Fimage.png?alt=media&#x26;token=f3dea420-6618-4e2b-8ea0-890c082c7656" alt=""><figcaption></figcaption></figure>

#### Use dynamic Layers

When the user works with multiple widgets, this option lets the user rearrange the widgets up and down for easier access and convenience.

#### Property Type

Shows the list of actions and styles - the user can pick one of them, provide the corresponding value and click 'Apply Action' to see the result on the widget.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FkIPzzPcSFOm4TRX6m2gB%2Fimage.png?alt=media&#x26;token=52eb244b-f7a2-434a-b9bc-5b280b862015" alt=""><figcaption></figcaption></figure>

| Action            | Description                                                                                                                                                                  |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Hide Component    | <p>Sets whether the widget has to be displayed on the screen when the program is loaded.<br>Value - <code>true</code> / <code>false</code></p>                               |
| Disable Component | <p>Makes the widget read-only, and denies users any action over the element.<br>Value - <code>true</code> / <code>false</code></p>                                           |
| Margin            | Set in terms of "px" number which creates the space between the border and the content of the widget.                                                                        |
| Padding           | Set in terms of "px" number which creates the space between the border and outer elements.                                                                                   |
| Border Radius     | Sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.                                                        |
| Border Width      | Set the thickness of the border of the widget using this value. It is defined using "px" terms.                                                                              |
| Font Size         | Set the size of the text in "px" value - 12px                                                                                                                                |
| Font Weight       | Increase or decrease the thickness of the font using the list of numbers from 100-800.                                                                                       |
| Font Family       | Type the name of the font family. The reference to the list of font families can be found here: [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) |

#### Background Color

This setting defines the background color of the widget. Users can specify a precise color value using the RGB selection tool provided in the interface.

#### Border Color

This attribute sets the color for the widget's border lines. Applying this setting ensures consistent visual framing of the component.

#### Text Color

This function allows for the modification of the widget's text color, ensuring optimal legibility and visual alignment with the overall interface design.