codeAPI Reference

Sandbox.UI.Panel

calendar_today May 3, 2026 schedule ~1 min read person patrickjr verified 50

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
    }
}
  • Create panels with .razor files for complex layouts
  • Use .razor.scss for styling
  • Panels hotload during development
Was this helpful?