Component:Button: Difference between revisions

From Resonite Wiki
Fixed Link.
Added a video.
 
(4 intermediate revisions by 2 users not shown)
Line 2: Line 2:
<translate>
<translate>
<!--T:1-->
<!--T:1-->
{{stub}}
{{Infobox Component
{{Infobox Component
|Image=ButtonComponent.png
|Image=ButtonComponent.png
Line 9: Line 8:


<!--T:2-->
<!--T:2-->
== Intoduction ==
The '''Button''' component is an interactive [[UIX]] element that allows for users to click on its [[Component:RectTransform|RectTransform]]. It can provide visual feedback by altering the colors of graphics on the RectTransform [[Slot]], such as the [[Component:Image|Image]] component. This is able to trigger several other components, such as [[Component:TextField|Text Field]], by using the [[Button Events]] system.
 
A Button is a [[UIX]] component allows for users to click on its Rect. It provides visual feedback by altering the colors of graphics on the Rect, and is able to trigger several other components, such as [[Component:TextField|Text Field]], by using the [[Button Events]] system.


<!--T:3-->
<!--T:3-->
== Usage ==
{{Table ComponentFields
{{Table ComponentFields
|BaseColor|ColorX|The color that all other tints will be based on
|BaseColor|ColorX|The color that all other tints will be based on
|ColorDrivers|{{RootFieldType|SyncList`1|[[Type:ColorDriver|ColorDriver]]}}|TypeAdv1=true|A list of sets of colors. Each one points at another component's color, and determines how it looks normally, when highlighted, when pressed, and when disabled
|ColorDrivers|{{RootFieldType|SyncList`1|[[Type:ColorDriver|ColorDriver]]}}|TypeAdv1=true|A list of sets of colors. Each one points at another component's color, and determines how it looks normally, when highlighted, when pressed, and when disabled
|__legacy_NormalColor|ColorX|
|__legacy_NormalColor|ColorX|Legacy normal button color.
|__legacy_HighlightColor|ColorX|
|__legacy_HighlightColor|ColorX|Legacy highlight button color.
|__legacy_PressColor|ColorX|
|__legacy_PressColor|ColorX|Legacy press button color.
|__legacy_DisabledColor|ColorX|
|__legacy_DisabledColor|ColorX|Legacy disabled button color.
|__legacy_TintColorMode|ColorMode|
|__legacy_TintColorMode|ColorMode|Legacy tint button color.
|__legacy_ColorDrive|{{RootFieldType|FieldDrive`1|[[Type:ColorX|ColorX]]}}|TypeAdv7=true|
|__legacy_ColorDrive|{{RootFieldType|FieldDrive`1|[[Type:ColorX|ColorX]]}}|TypeAdv7=true|Legacy color drive button.
|IsPressed|Bool|True if the button is being pressed
|IsPressed|Bool|True if the button is being pressed
|IsHovering|Bool|True if someone is hovering over the button
|IsHovering|Bool|True if someone is hovering over the button
|HoverVibrate|VibratePreset|How a controller should vibrate when hovering over this button
|HoverVibrate|VibratePreset|How a controller should vibrate when hovering over this button
|PressVibrate|VibratePreset|How a controller should vibrate when pressing this button
|PressVibrate|VibratePreset|How a controller should vibrate when pressing this button
|ClearFocusOnPress|Bool|If set, will defocus any currently focused [[TextEditor]], [[DesktopInteractionRelay]], or any other [[IFocusable]] when this button is pressed. Defaults to true.
|ClearFocusOnPress|Bool|If set, will defocus any currently focused [[Component:TextEditor|TextEditor]], [[DesktopInteractionRelay]], or any other [[IFocusable]] when this button is pressed. Defaults to true.
|PassThroughHorizontalMovement|Bool|Whether or not press-and-drag movement should be passed to higher components
|PassThroughHorizontalMovement|Bool|Whether or not press-and-drag movement should be passed to higher components
(such as [[Scroll Rect (Component)|Scroll Rect]]s)
(such as [[Scroll Rect (Component)|Scroll Rect]]s)
|PassThroughVerticalMovement|Bool|Whether or not press-and-drag movement should be passed to higher components
|PassThroughVerticalMovement|Bool|Whether or not press-and-drag movement should be passed to higher components
(such as [[Scroll Rect (Component)|Scroll Rect]]s)
(such as [[Scroll Rect (Component)|Scroll Rect]]s)
|RequireLockInToPress|Bool|FIXME. Defaults to false.
|RequireLockInToPress|Bool|Internal. Defaults to false.
|RequireInitialPress|Bool|FIXME. Defaults to true.
|RequireInitialPress|Bool|Internal - Check for the initial press of the button. Defaults to true.
|PressPoint|Float2|The (x,y) coordinate where the button is being pressed
|PressPoint|Float2|The (x,y) coordinate where the button is being pressed
|SendSlotEvents|Bool|If set, all Pressing, Pressed, Released, HoverEnter, HoverStay, and HoverLeave events are sent to all [[IButtonPressReceiver]] components within this component's slot. Defaults to true.
|SendSlotEvents|Bool|If set, all Pressing, Pressed, Released, HoverEnter, HoverStay, and HoverLeave events are sent to all [[IButtonPressReceiver]] components within this component's slot. Defaults to true.
Line 45: Line 41:
}}
}}


== Behavior ==
== Usage ==
 
This can be used with [[ProtoFlux]], and specifically the [[ProtoFlux:Button Events|Button Events]] node. Allowing it to fire [[Impulses]] from this [[Type:IButton|IButton]] reference.


<!--T:5-->
<!--T:5-->
== Examples ==
== Examples ==
[[File:UIX Button Example 01.png|alt=A button from the Resonite Essentials folder.|thumb|A button from the Resonite Essentials folder.]]
There is a button UI Preset from the Resonite Essentials folder that users can use as a starting point for buttons.
Here is [[User:ProbablePrime|ProbablePrime]]'s tutorial on Buttons:
<youtube>lCGfFJYOj3o</youtube>


<!--T:6-->
<!--T:6-->
== Related Components ==
== Related Components ==
== See Also ==
* [[Component:TouchButton]]
* [[Component:LegacyButton]]
* [[Component:ButtonRelay]]
* [[Component:ButtonToggle]]
* [[Component:PhysicalButton]]
</translate>
</translate>
[[Category:Components{{#translation:}}|Button]]
[[Category:Components{{#translation:}}|Button]]
[[Category:ComponentStubs]]
[[Category:Components:UIX:Interaction{{#translation:}}|Button]]
[[Category:Components:UIX:Interaction{{#translation:}}|Button]]

Latest revision as of 05:15, 22 July 2024

Component image 
Button component as seen in the Scene Inspector


The Button component is an interactive UIX element that allows for users to click on its RectTransform. It can provide visual feedback by altering the colors of graphics on the RectTransform Slot, such as the Image component. This is able to trigger several other components, such as Text Field, by using the Button Events system.

Fields
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.
BaseColor ColorX The color that all other tints will be based on
ColorDrivers list of ColorDriver A list of sets of colors. Each one points at another component's color, and determines how it looks normally, when highlighted, when pressed, and when disabled
__legacy_NormalColor ColorX Legacy normal button color.
__legacy_HighlightColor ColorX Legacy highlight button color.
__legacy_PressColor ColorX Legacy press button color.
__legacy_DisabledColor ColorX Legacy disabled button color.
__legacy_TintColorMode ColorMode Legacy tint button color.
__legacy_ColorDrive field drive of ColorX Legacy color drive button.
IsPressed Bool True if the button is being pressed
IsHovering Bool True if someone is hovering over the button
HoverVibrate VibratePreset How a controller should vibrate when hovering over this button
PressVibrate VibratePreset How a controller should vibrate when pressing this button
ClearFocusOnPress Bool If set, will defocus any currently focused TextEditor, DesktopInteractionRelay, or any other IFocusable when this button is pressed. Defaults to true.
PassThroughHorizontalMovement Bool Whether or not press-and-drag movement should be passed to higher components

(such as Scroll Rects)

PassThroughVerticalMovement Bool Whether or not press-and-drag movement should be passed to higher components

(such as Scroll Rects)

RequireLockInToPress Bool Internal. Defaults to false.
RequireInitialPress Bool Internal - Check for the initial press of the button. Defaults to true.
PressPoint Float2 The (x,y) coordinate where the button is being pressed
SendSlotEvents Bool If set, all Pressing, Pressed, Released, HoverEnter, HoverStay, and HoverLeave events are sent to all IButtonPressReceiver components within this component's slot. Defaults to true.
Pressed ButtonEventHandler Delegate. If set, this function is called with the Pressed event. Defaults to unset.
Pressing ButtonEventHandler Delegate. If set, this function is called with the Pressing event. Defaults to unset.
Released ButtonEventHandler Delegate. If set, this function is called with the Released event. Defaults to unset.
HoverEnter ButtonEventHandler Delegate. If set, this function is called with the HoverEnter event. Defaults to unset.
HoverStay ButtonEventHandler Delegate. If set, this function is called with the HoverStay event. Defaults to unset.
HoverLeave ButtonEventHandler Delegate. If set, this function is called with the HoverLeave event. Defaults to unset.

Usage

This can be used with ProtoFlux, and specifically the Button Events node. Allowing it to fire Impulses from this IButton reference.

Examples

A button from the Resonite Essentials folder.
A button from the Resonite Essentials folder.

There is a button UI Preset from the Resonite Essentials folder that users can use as a starting point for buttons.

Here is ProbablePrime's tutorial on Buttons:

Related Components

See Also