codeAPI Reference
Sandbox.UI.Panel
Sandbox.UI.Panel
Base class for UI panels.
Overview
Panel is the base class for all UI in s&box. Create panels using Razor (.razor) files or dynamically in code.
Creating Panels
CSHARP
// Create panel dynamically
var panel = new Panel();
panel.AddClass("my-panel");
// Add to root
RootPanel.Current.AddChild(panel);Panel Tree
CSHARP
// Add child
var child = panel.AddChild<Button>();
// Remove child
panel.DeleteChildren();
// Find child
var button = panel.QuerySelector(".submit-btn");Styling
CSHARP
// Add CSS classes
panel.AddClass("visible");
// Remove class
panel.RemoveClass("hidden");
// Toggle
panel.ToggleClass("active");
// Set styles directly
panel.Style.BackgroundColor = Color.Red;
panel.Style.Width = Length.Percent(50);Positioning
CSHARP
// Flex layout (default)
panel.Style.FlexDirection = FlexDirection.Column;
panel.Style.JustifyContent = Justify.Center;
panel.Style.AlignItems = Align.Center;
// Absolute positioning
panel.Style.Position = PositionMode.Absolute;
panel.Style.Left = 100;
panel.Style.Top = 50;Input
CSHARP
// Mouse events
panel.AddEventListener("onmousedown", (e) => {
Log.Info("Mouse down!");
});
// Keyboard
panel.AddEventListener("onkeydown", (e) => {
if (e.Key == "escape") Close();
});Visibility
CSHARP
// Show/hide
panel.SetClass("hidden", false); // Show
panel.SetClass("hidden", true); // Hide
// Check visibility
bool visible = panel.IsVisible;Lifecycle
CSHARP
protected override void OnAfterTreeRender(bool firstTime)
{
if (firstTime)
{
// Tree is ready
}
}Related
- Create panels with .razor files for complex layouts
- Use .razor.scss for styling
- Panels hotload during development
Was this helpful?