⤶ <cat>Dev.UI</cat> <title>UI Layout Binding</title> To enable interaction between code and layout, we enable binding. # Variables Create a property on your component's code. ```csharp public string MyVariable { get; set; } ``` Bind it to any property by adding @ before the property name. ```html <text @text="MyVariable"></text> ``` The property will be updated when your variable changes. <note>The properties are polled at regular intervals. If the value is different we update the value. This is our comprimise between performance and ease of use.</note> # Elements You can create a reference to an element. ```csharp public Label GameTitle { get; set; } ``` ```html <text @ref="GameTitle"></text> ``` This variable will be available immediately after the layout is loaded. ```csharp LoadLayout( "/ui/mainmenu/mainmenu.htm" ); GameTitle.Text = "s&box"; GameTitle.Class.Add( "game_title" ); ``` # Events You can call events from elements ```html <button class="option" onclick="PlayGame()">Play Game</button> ``` ```csharp public void PlayGame() { // Do stuff } ``` The method is called on the panel which loaded the layout. # Panel Events Similar to events, you can wire up Panel Events that don't need any code. In this example clicking on the Options button toggles the game_title class on it. ```html <button class="option" onclick="this.ClassToggle( 'game_title' )">Options</button> ``` You can also target this towards other panels by name ```html <button name="MyPanel">Watch me</button> <button onclick="MyPanel.ClassToggle( 'hidden' )">Click Me</button> ``` # Special Events Adding `.console` to the event name will run the string as a console command when the event triggers. ```html <button onclick.console="map de_dust">Play Game</button> ```⤶ ```