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.

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 dynamically 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.

Attribute Values

Value	Description	Example
x<left>y<top>	Specify left/top coordinates in pixels.	x10y20

This attribute is available when parent's layout is neither "flex" nor "grid".

When parent's layout is neither "flex" nor "grid", this attribute defaults to auto.

Flex Grow

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

Attribute Values

Value	Description
false	Objects do not grow to fill the available space.
true	Objects expand to fill the available space.

This attribute is available when parent's layout is "flex".

When parent's layout is "flex", this attribute defaults to auto.

Flex Shrink

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

Attribute Values

Value	Description
false	Objects do not shrink to fit the available space.
true	Objects shrink to fit the available space.

This attribute is available when parent's layout is "flex".

When parent's layout is "flex", this attribute defaults to auto.

Column

Specifies the starting column of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column index starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to auto.

note

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

Column Span

Specifies how many grid columns the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to auto.

note

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

Row

Specifies the starting row of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
[empty]	Auto placement by the grid.
<int>	Row index starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to auto.

note

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

Row Span

Specifies how many grid rows the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Row span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to auto.

note

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

Width

Sets the object's width in pixels.

Minimum value is 40.

The default value is: auto.

Field

Value

Specifies the field's value.

Attribute Values

Value	Description
false	Default value. Not checked.
true	Checked.

The default value is: false.

Switch

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.

Attribute Values

Value	Description	Example
<string>	Command name.
$[variable name]	A command name that sets a variable.	$myvar
$[variable name]!	A command name that sets a persistent variable.	$myvar!

By default, this attribute uses the id attribute.

Auto Send

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

Attribute Values

Value	Description
auto	Default value. The value is sent only if there's no buttons with submit action in the same or a parent container.
true	The value is sent automatically on change.
false	The value is not automatically sent.

The default value is: auto.

Feedback

If feedback is enabled, when the action is performed, a loader is displayed until the server responds.

Also the action can't be performed again until the server responds.

Attribute Values

Value	Description
false	Default value. Feedback is disabled.
true	Feedback is enabled.

The default value is: false.

Knob Size

Specifies the switch size preset.

Attribute Values

Value	Description
small	Default value. Small size, matching the current switch dimensions.
medium	Medium size, for a more comfortable control.
large	Large size, for touch-first or emphasized controls.

The default value is: small.

Confirm

Confirm

Requires a confirmation popup before changing the switch value.

Attribute Values

Value	Description
false	Default value. No confirmation, the value is changed right away.
on	Confirmation is required when switching to true.
off	Confirmation is required when switching to false.
both	Confirmation is required when switching to true or false.

The default value is: false.

Confirm On Message

The confirmation message to be displayed when switching to true.

Attribute Values

Value	Description	Example
<string>	The message to be displayed in the confirm popup.	Turn this on?

This attribute is available when confirm is one of "on" or "both".

Confirm Off Message

The confirmation message to be displayed when switching to false.

Attribute Values

Value	Description	Example
<string>	The message to be displayed in the confirm popup.	Turn this off?

This attribute is available when confirm is one of "off" or "both".

Label

Label

Specifies a label that is displayed next to the field.

Attribute Values

Value	Description
<string>	A label.

Description

Specifies a description displayed below the label.

Attribute Values

Value	Description
<string>	A description.

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).

Attribute Values

Value	Description	Example
<integer>	Font size in pixels.
<percentage>%	Relative font size in percentage.	90%

The default value is: 14.

Font Color

Specifies the text CSS color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Font Weight

Specifies the weight of the font.

Attribute Values

Value	Description
normal	Default value. Normal.
bold	Bold.
bolder	Bolder.
lighter	Lighter.

The default value is: normal.

Italic

Show the text in italics.

Attribute Values

Value	Description
false	Default value. Normal.
true	Italics.

The default value is: false.

Small Caps

Sets the font to small caps.

Attribute Values

Value	Description
false	Default value. Normal.
true	Small caps.

The default value is: false.

Decoration

Specifies the text decoration.

Attribute Values

Value	Description
none	Default value. No decoration.
underline	Underline.
overline	Overline.
line-through	Line through.

The default value is: none.

Text Align

Sets the horizontal alignment of the text.

Attribute Values

Value	Description
none	Default value. No alignment.
left	Left alignment.
right	Right alignment.
center	Center alignment.
justify	Justified alignment.

The default value is: none.

Line Height

Sets the line height of the text.

Attribute Values

Value	Description
<float>	Specify the line height as a multiple of the font size.

The default value is: 1.0.

CSS Style

note

This attribute has been deprecated since ver. 4.0

Style

Click Effect

Specifies the object's click effect.

Attribute Values

Value	Description
none	Default value. No effect.
pulse	Pulse effect.
ripple	Ripple effect.
bubbles	Bubbles effect.
confetti	Confetti effect.

The default value is: none.

Click Effect Color

Specifies the object's click effect color.

Attribute Values

Value	Description
<html color>	Any valid HTML color.

This attribute is available when clickeffect is not "none".

Click Effect Particles

Specifies how many particles are emitted by particle-based click effects.

Attribute Values

Value	Description
normal	Default value. Default particle count.
many	More particles.
lots	Lots of particles.

This attribute is available when clickeffect is one of "bubbles" or "confetti".

When clickeffect is one of "bubbles" or "confetti", this attribute defaults to normal.

View

Visible

Sets the object's visibility.

Attribute Values

Value	Description
true	Default value. Visible.
false	Hidden.

The default value is: true.

Enabled

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

Attribute Values

Value	Description
true	Default value. Enabled.
false	Disabled.

The default value is: true.

Blink

Blinks the object at the specified speed.

Attribute Values

Value	Description
false	Default value. Not blinking.
slow	Blinks slowly.
fast	Blinks fast.

The default value is: false.

Transition

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

Attribute Values

Value	Description
none	Default value. No transition.
fade	Fade in/out.
fade-left	Slide from left and fade in/out.
fade-right	Slide from right and fade in/out.
fade-up	Slide from top and fade in/out.
fade-down	Slide from bottom and fade in/out.
slide-left	Slide from left.
slide-right	Slide from right.
slide-up	Slide from top.
slide-down	Slide from bottom.
zoom-in	Zoom in.
zoom-out	Zoom out.
3d-flip-left	3D flip from left.
3d-flip-right	3D flip from right.

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.

Transition Duration

Specifies the transition duration in milliseconds.

Attribute Values

Value	Description
<integer>	Duration in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 300.

note

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

Transition Delay

Specifies the transition delay in milliseconds.

Attribute Values

Value	Description
<integer>	Delay in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 0.

note

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

Opacity

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

Attribute Values

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

The default value is: 1.0.

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.

Attribute Values

Value	Description	Example
<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

note

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

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.

Attribute Values

Value	Description
<float>	Specify the scale for both width and height of the object.

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.

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.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.

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.