<cat>UI.Intro</cat> <title>Events and Input</title> ## Panel Events & Input # Events Panels can listen for events, here's the current list: | Event | Description | |-------------------|-----| | onclick | Called when left clicking on a panel | | onmiddleclick | Called when middle clicking on a panel | | onrightclick | Called when right clicking on a panel | | onmousedown | Called when any mouse button is pressed this frame | | onmouseup | Called when any mouse button is released this frame | | ondoubleclick | Called when a panel is double clicked on | | onmousemove | Called every frame where your mouse is moving inside of a panel | | onmouseover | Called when your mouse enters the bounds of a panel | | onmouseout | Called when your mouse exits the bounds of a panel | | onfocus | Called when the panel comes into focus | | onblur | Called when the panel loses focus | | onback | Called when you click the Back button on your mouse | | onforward | Called when you click the Forward button on your mouse | | onescape | Called when the escape key is pressed, also Blur() if focused | **Warning**: You may have to disable pointer events on overlapping transparent GUI elements for events to trigger! **Bug**: There's no guarantee that onmouseover and onmouseout events will be triggered in the correct order; if that matters to you then you're better off not relying on it. ## Usage ```csharp panel.AddEventListener( "onclick", e => Log.Info( "I clicked my panel!" ) ); ``` ⤶ Or you can use these events in .razor files⤶ ⤶ ```csharp⤶ <text @onclick=@OnClick>Click me!</text>⤶ ```⤶ ⤶ Assume in the above example that there is a function `OnClick` in the razor class. You can learn more about this usage here https://wiki.facepunch.com/sbox/ui-razor#events⤶ # Class Overrides All panels have these available virtual methods for you to override, if you choose not to use events. ```csharp protected virtual void OnClick( MousePanelEvent e ) protected virtual void OnMiddleClick( MousePanelEvent e ) protected virtual void OnRightClick( MousePanelEvent e ) protected virtual void OnMouseDown( MousePanelEvent e ) protected virtual void OnMouseUp( MousePanelEvent e ) protected virtual void OnMouseMove( MousePanelEvent e ) protected virtual void OnDoubleClick( MousePanelEvent e ) protected virtual void OnMouseOver( MousePanelEvent e ) protected virtual void OnMouseOut( MousePanelEvent e ) protected virtual void OnBack( PanelEvent e ) protected virtual void OnForward( PanelEvent e ) protected virtual void OnFocus( PanelEvent e ) protected virtual void OnBlur( PanelEvent e ) protected virtual void OnEscape( PanelEvent e ) ``` ## Adding a text entry This is an example of the usage of the `Add.TextEntry(string name)`. Source: base gamemode - /code/UI/Chat.cs ```cs using Sandbox.UI.Construct; using System; namespace Sandbox.UI { public partial class ChatBox : Panel { static ChatBox Current; public Panel Canvas { get; protected set; } public TextEntry Input { get; protected set; } public ChatBox() { Current = this; StyleSheet.Load( "/ui/chat/ChatBox.scss" ); Canvas = Add.Panel( "chat_canvas" ); Input = Add.TextEntry( "" ); Input.AddEventListener( "onsubmit", () => Submit() ); Input.AddEventListener( "onblur", () => Close() ); Input.AcceptsFocus = true; Input.AllowEmojiReplace = true; } void Open() { AddClass( "open" ); Input.Focus(); } void Close() { RemoveClass( "open" ); Input.Blur(); } } } ```