Skip to main content

Switch

The Switch object is a standard toggle button, representing a binary state switch.

Its value is sent as a command to the server on a submit action or when it changes, if

Auto Send it true.

Switch tutorial

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding: ="mybutton" + ui('button', 'address')

UISet: UISet('button', 'address', '1') switches the ID to mybutton1 UISet('button', 'address', '2') switches the ID to mybutton2

Position and Size

Position

Sets the object's position.

The default value is: auto.

Attribute Values
ValueDescriptionExample
x<left>y<top>Specify left/top coordinates in pixels.x10y20

Flex Grow

Specifies if the objects should grow to fill the available space.

The default value is: auto.

Attribute Values
ValueDescription
trueObjects expand to fill the available space.
falseObjects do not grow to fill the available space.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

The default value is: auto.

Attribute Values
ValueDescription
trueObjects shrink to fit the available space.
falseObjects do not shrink to fit the available space.

Width

Sets the object's width in pixels.

Minimum value is 1.

The default value is: auto.

Field

Value

Specifies the field's value.

The default value is: false.

Attribute Values
ValueDescription
falseDefault value. Not checked.
trueChecked.

Name

Specifies the name of the field, used to send a command to the server, along with the field's value as a parameter.

If the name starts with $, then the server will automatically set a variable with the same name as the command, containing the command's parameter.

The default value is: =id.

Attribute Values
ValueDescriptionExample
<string>Command name.
$[variable name]A command name that sets a variable.$myvar
$[variable name]!A command name that sets a persistent variable.$myvar!

Auto Send

Specifies whether the value is automatically sent on change or is sent through a button with submit action.

The default value is: auto.

Attribute Values
ValueDescription
autoDefault value. The value is sent only if there's no buttons with submit action in the same or a parent container.
trueThe value is sent automatically on change.
falseThe value is not automatically sent.

Label

Label

Specifies a label that is displayed next to the field.

Attribute Values
ValueDescription
<string>A label.

Font Family

Specifies the font family.

The default value is: default.

Font Size

Specifies the font size in pixels or percentage (relative to the project's font size).

The default value is: 14.

Attribute Values
ValueDescriptionExample
<integer>Font size in pixels.
<percentage>%Relative font size in percentage.90%

Font Color

Specifies the text CSS color.

Attribute Values
ValueDescriptionExample
<html color>Color in any html accepted format.#ff0000

Font Weight

Specifies the weight of the font.

The default value is: normal.

Attribute Values
ValueDescription
normalDefault value. Normal.
boldBold.
bolderBolder.
lighterLighter.

Italic

Show the text in italics.

The default value is: false.

Attribute Values
ValueDescription
falseDefault value. Normal.
trueItalics.

Small Caps

Sets the font to small caps.

The default value is: false.

Attribute Values
ValueDescription
falseDefault value. Normal.
trueSmall caps.

Decoration

Specifies the text decoration.

The default value is: none.

Attribute Values
ValueDescription
noneDefault value. No decoration.
underlineUnderline.
overlineOverline.
line-throughLine through.

Text Align

Sets the horizontal alignment of the text.

The default value is: none.

Attribute Values
ValueDescription
noneDefault value. No alignment.
leftLeft alignment.
rightRight alignment.
centerCenter alignment.
justifyJustified alignment.

Line Height

Sets the line height of the text.

The default value is: 1.0.

Attribute Values
ValueDescription
<float>Specify the line height as a multiple of the font size.

View

Visible

Sets the object's visibility.

The default value is: true.

Attribute Values
ValueDescription
trueDefault value. Visible.
falseHidden.

Enabled

Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.

The default value is: true.

Attribute Values
ValueDescription
trueDefault value. Enabled.
falseDisabled.

Blinks the object at the specified speed.

The default value is: false.

Attribute Values
ValueDescription
falseDefault value. Not blinking.
slowBlinks slowly.
fastBlinks fast.

Transition

Specifies the transition effect when the object is shown or hidden.

The default value is: none.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescription
noneDefault value. No transition.
fadeFade in/out.
fade-leftSlide from left and fade in/out.
fade-rightSlide from right and fade in/out.
fade-upSlide from top and fade in/out.
fade-downSlide from bottom and fade in/out.
slide-leftSlide from left.
slide-rightSlide from right.
slide-upSlide from top.
slide-downSlide from bottom.
zoom-inZoom in.
zoom-outZoom out.
3d-flip-left3D flip from left.
3d-flip-right3D flip from right.

Transition Duration

Specifies the transition duration in milliseconds.

The default value is: 300.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescription
<integer>Duration in milliseconds.

Transition Delay

Specifies the transition delay in milliseconds.

The default value is: 0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescription
<integer>Delay in milliseconds.

Opacity

Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.

The default value is: 1.0.

Attribute Values
ValueDescription
0The object is fully transparent.
>0.0, <1.0The object is translucent (content behind the element can be seen).
1.0Default value. The object is fully opaque.

Rotation

Specifies the degrees by which the object is rotated. A positive number rotates it clockwise, while a negative value rotates it counter-clockwise.

The default value is: 0.

CSS Class

Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.

Margin

Specifies the margin of the object. The margin is the space outside the object's border.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescriptionExample
<int>Specify the margin in pixels for all sides of the object.
<top> <right> <bottom> <left>Specify the margin in pixels for each side of the object.10 20 30 40

View Scale

Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.

The default value is: 1.0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescription
<float>Specify the scale for both width and height of the object.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Attribute Values
ValueDescription
falseDefault value. Object is included in the UI.
trueObject is excluded from the UI.