S&box Wiki

Aliases and SetProperty Attributes

Element Aliases

The aliases of a Panel are determined using a combination of the AliasAttribute, ClassNameAttribute, and LibraryAttribute .NET attributes applied to the class.

// The attributes that define the aliases of Sandbox.UI.Image [Library( "image" ), Alias( "img" ), Expose] public partial class Image : Panel

This allows for multiple element names to refer to the same subclass of Panel.

The below elements are both instances of Sandbox.UI.Panel:

<Image src="ui/img/Hello.jpg"/> <img src="ui/img/Hello.jpg"/>

A common reason to use an alias on a Panel is to allow it to be used with the name of a familiar HTML element.

SetProperty Attributes

The set of HTML attributes available on a Panel is determined in part by the SetProperty method in that Panel. The properties of that Panel will also act as HTML attributes.

// An example of SetProperty taken from Sandbox.UI.Image public override void SetProperty( string name, string value ) { base.SetProperty( name, value ); if ( name == "src" ) SetTexture( value ); }

Often, the purpose of these attributes is simply to set a .NET property using the name of a familiar HTML attribute.

List of Elements Aliases and Attributes

Here is a list of the some of the UI elements available to use in s&box. Elements without an alias or SetProperty attribute are not included here - instead, you may only use their .NET class name and properties.

Under Aliases, you'll find alternate element names that can be used to refer to the same .NET class.

Under SetProperty Attributes, you'll find a list of attributes that are checked for in the SetProperty overload of the Panel, so they might not appear as property in the API search.

Remember that the properties of a Panel found in the API search may be used as attributes on an element in Razor, and that this list of attributes is non-exhaustive.

.NET Class Aliases SetProperty Attributes
Panel div, span, panel id, value, class, style
Image img, image src
Label label, text text
SvgPanel svg
ScenePanel scene
Button text, html, icon, active
Checkbox checkbox checked, value, text
DropDown select, dropdown
Field field
Form form
IconPanel icon, i
NavHostPanel navigator default
NavLinkPanel a, navlink
SplitContainer split direction, min-left, min-right, default-left, default-right, cookie
TabContainer tabcontainer, tabcontrol, tabs cookie
TextEntry placeholder, numeric, format, value, disabled
VirtualScrollPanel virtualscrollpanel item-width, item-height, auto-columns