<cat>UI.Razor</cat> <title>Aliases and SetProperty Attributes</title> # 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](https://sbox.game/api). 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`|