S&box Wiki

Revision Difference

UI/Components#551247

<title>UI/Components</title>⤶ ⤶ # Components⤶ ⤶ There are a few basic components that you can use in your game.⤶ ⤶ ## Panel⤶ ⤶ **API Reference**: [Sandbox.UI.Panel](https://asset.party/api/Sandbox.UI.Panel)⤶ ⤶ Panels are the basic building blocks for UI elements. All of the elements below derive from this class.⤶ A panel can render, as well as handle <page text="events and input">ui-events-and-input</page>, making them very versatile.⤶ ⤶ ```html⤶ <div>⤶ @* Put stuff here *@⤶ </div>⤶ ```⤶ ⤶ ## Label⤶ ⤶ **API Reference**: [Sandbox.UI.Label](https://asset.party/api/Sandbox.UI.Label)⤶ ⤶ The Label component is used to display text.⤶ ⤶ ```html⤶ <label>Hello, World!</label>⤶ ```⤶ ⤶ ## Button⤶ ⤶ **API Reference**: [Sandbox.UI.Button](https://asset.party/api/Sandbox.UI.Button)⤶ ⤶ Users can click these to invoke an action.⤶ These have text, and can optionally have an icon.⤶ ⤶ ```html⤶ <button @onclick=MyFunction>Click me!</button>⤶ ```⤶ ⤶ ## Checkbox⤶ ⤶ **API Reference**: [Sandbox.UI.Checkbox](https://asset.party/api/Sandbox.UI.Checkbox)⤶ ⤶ A Checkbox allows the user to select one or more items from a set. It is ideal for situations where multiple choices are allowed, and it doesn't take up much room.⤶ ⤶ ```html⤶ <checkbox Value:bind=@CheckboxValue>This is a checkbox</checkbox>⤶ ```⤶ ⤶ ## Image⤶ ⤶ **API Reference**: [Sandbox.UI.Image](https://asset.party/api/Sandbox.UI.Image)⤶ ⤶ The Image component is used to display a graphic.⤶ ⤶ ```html⤶ <img src="/ui/my_cool_image.png"></image>⤶ ```⤶ ⤶ ## TextEntry⤶ ⤶ **API Reference**: [Sandbox.UI.TextEntry](https://asset.party/api/Sandbox.UI.TextEntry)⤶ ⤶ TextEntry components are used for input fields that allow users to enter text.⤶ ⤶ ```html⤶ <textentry @onchange=OnTextChange></textentry>⤶ ```⤶ ⤶ ## WebPanel⤶ ⤶ **API Reference**: [Sandbox.UI.WebPanel](https://asset.party/api/Sandbox.UI.WebPanel)⤶ ⤶ A <page text="WebPanel">embedding-websites</page> is used to display web content in your game. This can include HTML content or even whole websites.⤶ ⤶