S&box Wiki
Home
/
Edit Events and Input
View
Edit
History
No Category
Developer Overview
The Project System
Publishing To Asset Party
Getting Started With Hammer
Mapping Basics
Mapping Entities
Advanced Mapping Techniques
Getting Started with Modeldoc
Animgraph & Animation
Physics
Modeldoc Nodes
Advanced Modelling
UI Basics
Styles & Stylesheets
Razor Templates
Game Menus
Materials
Built In Shaders
Shaders
Shader Reference
Sounds & Audio
Particles
Getting Started
Making Games
Input
Networking
Physics
Rendering
Editor & Tools
VR
Misc
Playing Guides
Console Commands & Variables
Dedicated Server
Log in to edit
Events and Input
<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();
}
}
}
```
<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(); } } } ```
S&box Wiki
Development
Developer Overview
6
Editor Overview
General FAQ
System Requirements
The s&box wiki
Troubleshooting
Useful Links
The Project System
4
Adding Assets
Creating a Game Project
Project Settings Window - Games
Project Types
Publishing To Asset Party
2
Uploading assets
Uploading projects
Hammer
Getting Started With Hammer
3
Getting Started With Hammer
Making Your First Map
Mapping Resources
Mapping Basics
6
Cordons
Hotspot Materials
Selection Sets
Standard Mapping Dimensions
Tool Materials
Tools Visualisation Modes
Mapping Entities
2
Creating a Door
Light Entities
Advanced Mapping Techniques
8
Collaborating With Prefabs and Git
Instances
Prefabs
Quixel Bridge Plugin
Tilesets
Tilesets-Advanced
Tilesets-Proxies
VIS Optimizations
Models & Animation
Getting Started with Modeldoc
7
Automatic Model Setup
Breakpieces
Creating a Model
Guide to Models
Importing Rust Weapons
LODs
ModelDoc FAQ & best practices
Animgraph & Animation
4
Animations without Animgraph
AnimEvents, AnimGraph Tags, Attachments
Animgraph
Delta Animations
Physics
3
Cloth Physics
Collisions, Physics & Surface Types
Jiggle Bones
Modeldoc Nodes
1
Custom ModelDoc nodes
Advanced Modelling
6
Bodygroups
Citizen
First Person
IKChains and Stride Retargeting
Morphs
Vertex Normals
User Interface
UI Basics
6
Custom Fonts
Embedding Websites
Enabling Pointer Events
Events and Input
UI Basics
UI with Components
Styles & Stylesheets
1
Video Backgrounds
Razor Templates
4
A Razor Overview
Aliases and SetProperty Attributes
Generic Components
Templates
Game Menus
1
Making a Custom Pause Screen
Materials & Shaders
Materials
5
Guide to Materials
Material Attributes
Material Resources
Texture Settings
Using Dynamic Expressions
Built In Shaders
2
Foliage Shader
Glass Shader
Shaders
4
Compute Shaders
Constant Buffers
Material API
Shading Model
Shader Reference
5
Anatomy of Shader Files
Getting rid of Tex2D macros
Shader Reference
Shader States
Texture Format Cheat-Sheet
Other Assets
Sounds & Audio
4
Guide to Sounds
Sound Events
Sound Occlusion
Soundscapes
Particles
5
Creating animated sprites
Creating your first particle effect
Understanding Particle Editor
Using custom sprites
Using particle systems from C#
Coding
Getting Started
5
Cheat Sheet
Learning Resources
Setting up Rider
Setting up Visual Studio
Setting up Visual Studio Code
Making Games
2
Components
GameObjects
Input
4
Commands
ConVars
Input System
Speech Recognition
Networking
7
Auth Tokens
Http Requests
Lobby System
Networked Types
Networking Basics
RPCs
WebSockets
Physics
5
Collisions
Hitboxes
Joints
Traces
Triggers
Rendering
3
Render Tags
RenderHooks
Scenes
Editor & Tools
5
Guide to Widgets
Hammer API
Hammer Gizmos
Hotload Performance
Widget Docking
VR
3
Getting Started
VR Input
VR Overlays
Misc
10
Asset Types
Attributes and Component Properties
Backend API
Code Accesslist
CPU Performance Profiling
DisplayInfo
package/find
Setting Up A Navigation Mesh
Threaded Tasks
TypeLibrary
Playing
Playing Guides
3
Default Keybinds
Proton
s&box on macOS (Experimental)
Console Commands & Variables
1
Launch Arguments
Dedicated Server
1
Dedicated Servers