You will generally want to define properties of UI elements using Design mode in App Lab. But sometimes you will want to change the value of a property in your app based on the user or in response to an event. setProperty() lets your app change any property listed in Design mode for a given UI element.
| Property | Value | Works on |
|---|---|---|
| "width" | number | All Design mode elements except screens |
| "height" | number | All design mode elements except screens |
| "x" | number | All design mode elements except screens |
| "y" | number | All design mode elements except screens |
| "text-color" | color string | Button, text input, label, dropdown, and text area |
| "background-color" | color string | Button, text input, label, dropdown, screen, and text area |
| "font-size" | number | Button, text input, label, dropdown, and text area |
| "text-align" | string ("left", "right", "center", or "justify") | Button, label, text area |
| "hidden" | boolean | All design mode elements except screens |
| "text" | string | Button, label, text area |
| "placeholder" | string | Text input |
| "image" | string | Button, image |
| "icon-color" | color string | Image |
| "group-id" | string | Radio button |
| "checked" | boolean | Radio button, checkbox |
| "readonly" | boolean | Text area |
| "options" | list of values | Dropdown |
| "value" | number | Slider |
| "min" | number | Slider |
| "max" | number | Slider |
| "step" | number | Slider |
| "fit" | string | Image |
| "index" | number | Dropdown |
Change button color and font size
// Change button color and font size
button("myButton", "Click me!");
setProperty("myButton", "background-color", "red");
setProperty("myButton", "font-size", 20);
setProperty(id, property, value)
| Name | Type | Required? | Description |
|---|---|---|---|
| id | String | The ID of the UI element to which this function applies. Must begin with a letter, contain no spaces, and may contain letters, digits, - and _. | |
| property | String | The property to change. | |
| value | String, Number, or Boolean | The new value to set the property to. The type will depend on which property you are trying to set. |
getProperty() can be used to get the current value of a given property.Found a bug in the documentation? Let us know at documentation@code.org