m ProbablePrime moved page Checkbox (Component) to Component:Checkbox: Creating component Namespace |
Filled in this component page. Added a picture link. Changed link to an actual video. |
||
(One intermediate revision by one other user not shown) | |||
Line 2: | Line 2: | ||
<translate> | <translate> | ||
<!--T:1--> | <!--T:1--> | ||
{{Infobox Component | {{Infobox Component | ||
|Image=CheckboxComponent.png | |Image=CheckboxComponent.png | ||
Line 9: | Line 8: | ||
<!--T:2--> | <!--T:2--> | ||
The '''Checkbox''' component is a [[UIX]] element used with a [[Button (Component)|Button]] component to provide a toggling state whenever the button is pressed. | |||
The '''Checkbox''' component is used with a [[Button (Component)|Button]] component to provide a toggling state whenever the button is pressed. | |||
<!--T:3--> | <!--T:3--> | ||
{{Table ComponentFields | {{Table ComponentFields | ||
|State|Bool| | |State|Bool|The current state of thie check box. | ||
|TargetState|IField`1| | |TargetState|{{RootFieldType|RelayRef`1|[[Type:IField`1|IField`1]]<[[Type:Bool|Bool]]>}}|TypeAdv1=true|The Bool field to drive with the state of the checkbox. | ||
|CheckVisual| | |CheckVisual|{{RootFieldType|FieldDrive`1|[[Type:Bool|Bool]]}}|TypeAdv2=true|The Bool field controlling visibility of the visual to display when the checkbox is in the checked state. | ||
}} | }} | ||
<!--T:4--> | <!--T:4--> | ||
== | == Usage == | ||
Checkboxes are great for settings and options in your designs. | |||
<!--T:5--> | <!--T:5--> | ||
== Examples == | == Examples == | ||
[[File:UIX Checkbox Example 01.png|alt=A checkbox from the Resonite Essentials folder.|thumb|A checkbox from the Resonite Essentials folder.]] | |||
There is a checkbox UI Preset from the Resonite Essentials folder that users can use as a starting point for checkboxes. | |||
Typically you'd have a child of the checkbox's slot containing an [[Image (Component)|Image]] component, and that slot's Active property is driven using the CheckVisual property of the checkbox. In addition, you can have a [[SpriteProvider (Component)|SpriteProvider]] driving the Image component. | Typically you'd have a child of the checkbox's slot containing an [[Image (Component)|Image]] component, and that slot's Active property is driven using the CheckVisual property of the checkbox. In addition, you can have a [[SpriteProvider (Component)|SpriteProvider]] driving the Image component. | ||
Here is [[User:ProbablePrime|ProbablePrime]]'s tutorial on checkboxes: | |||
<youtube>B2G708bnBeM</youtube> | |||
<!--T:6--> | <!--T:6--> | ||
== Related Components == | == Related Components == | ||
</translate> | </translate> | ||
[[Category:Components{{#translation:}}|Checkbox | [[Category:Components{{#translation:}}|Checkbox]] | ||
[[Category:Components:UIX:Interaction{{#translation:}}|Checkbox]] | |||
[[Category:Components:UIX:Interaction{{#translation:}}|Checkbox |
Latest revision as of 04:32, 22 July 2024
Component image
The Checkbox component is a UIX element used with a Button component to provide a toggling state whenever the button is pressed.
Name | Type | Description |
---|---|---|
persistent
|
Bool | Determines whether or not this item will be saved to the server. |
UpdateOrder
|
Int | Controls the order in which this component is updated. |
Enabled
|
Bool | Controls whether or not this component is enabled. |
State
|
Bool | The current state of thie check box. |
TargetState
|
direct RelayRef`1<IField`1<Bool>> | The Bool field to drive with the state of the checkbox. |
CheckVisual
|
field drive of Bool | The Bool field controlling visibility of the visual to display when the checkbox is in the checked state. |
Usage
Checkboxes are great for settings and options in your designs.
Examples
There is a checkbox UI Preset from the Resonite Essentials folder that users can use as a starting point for checkboxes.
Typically you'd have a child of the checkbox's slot containing an Image component, and that slot's Active property is driven using the CheckVisual property of the checkbox. In addition, you can have a SpriteProvider driving the Image component.
Here is ProbablePrime's tutorial on checkboxes: