S&box Wiki

Revision Difference

ui_binding#527100

<title>UI Layout Binding</title>⤶ ⤶ To enable interaction between code and layout, we enable binding.⤶ ⤶ # 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 if different we update the value. This is our comprimise between performance and ease of use.</note>⤶ ⤶ # Binding 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" );⤶ ```⤶