Revision Difference
ui-razor-elements#562864
<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`|
Garry's Mod
Rust
Steamworks
Wiki Help
S&box