sufi-blazor/docs/components/builder/SbPropertyGrid.md

SbPropertyGrid

A grid-based property editor that automatically generates input controls based on property definitions. Useful for displaying and editing object properties in a consistent format.

Parameters

Parameter	Type	Default	Description
Properties	List	[]	Property definitions to display
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
OnPropertyChanged	EventCallback	Fired when any property value changes

SbPropertyDefinition Class

Property	Type	Description
Name	string	Property identifier (used as input id)
Label	string	Display label
Value	object?	Current value
EditorType	SbPropertyEditorType	Type of editor to render
Required	bool	Whether property is required
Options	SbPropertyOption[]?	Options for Select editor type

SbPropertyEditorType Enum

Value	Description
Text	Text input
Number	Numeric input
Checkbox	Boolean checkbox
Select	Dropdown select
Color	Color picker

SbPropertyOption Class

Property	Type	Description
Value	string	Option value
Label	string	Display label

SbPropertyChangeEventArgs Class

Property	Type	Description
Property	SbPropertyDefinition	Changed property definition
NewValue	object?	New property value

CSS Classes

• sb-property-grid - Base class
• sb-property-grid__row - Property row
• sb-property-grid__label - Property label
• sb-property-grid__required - Required indicator
• sb-property-grid__value - Value container
• sb-property-grid__input - Text/number input
• sb-property-grid__checkbox - Checkbox input
• sb-property-grid__select - Select input
• sb-property-grid__color - Color input

Examples

Basic Property Grid

<SbPropertyGrid Properties="@properties" OnPropertyChanged="HandleChange" />

@code {
    private List<SbPropertyDefinition> properties = new()
    {
        new() { Name = "name", Label = "Name", EditorType = SbPropertyEditorType.Text, Value = "My Element" },
        new() { Name = "width", Label = "Width", EditorType = SbPropertyEditorType.Number, Value = 100 },
        new() { Name = "visible", Label = "Visible", EditorType = SbPropertyEditorType.Checkbox, Value = true }
    };
    
    private void HandleChange(SbPropertyChangeEventArgs args)
    {
        Console.WriteLine($"{args.Property.Name} = {args.NewValue}");
    }
}

With All Editor Types

<SbPropertyGrid Properties="@allProperties" OnPropertyChanged="HandleChange" />

@code {
    private List<SbPropertyDefinition> allProperties = new()
    {
        new() 
        { 
            Name = "title", 
            Label = "Title", 
            EditorType = SbPropertyEditorType.Text, 
            Value = "Hello",
            Required = true
        },
        new() 
        { 
            Name = "count", 
            Label = "Count", 
            EditorType = SbPropertyEditorType.Number, 
            Value = 42 
        },
        new() 
        { 
            Name = "enabled", 
            Label = "Enabled", 
            EditorType = SbPropertyEditorType.Checkbox, 
            Value = true 
        },
        new() 
        { 
            Name = "size", 
            Label = "Size", 
            EditorType = SbPropertyEditorType.Select,
            Value = "md",
            Options = new SbPropertyOption[]
            {
                new() { Value = "sm", Label = "Small" },
                new() { Value = "md", Label = "Medium" },
                new() { Value = "lg", Label = "Large" }
            }
        },
        new() 
        { 
            Name = "color", 
            Label = "Color", 
            EditorType = SbPropertyEditorType.Color, 
            Value = "#3b82f6" 
        }
    };
}

In Inspector Panel

<SbInspectorPanel Title="Button Properties">
    <SbPropertyGrid Properties="@buttonProperties" 
                    OnPropertyChanged="UpdateButton" />
</SbInspectorPanel>

@code {
    private List<SbPropertyDefinition> buttonProperties = new()
    {
        new() { Name = "text", Label = "Text", EditorType = SbPropertyEditorType.Text, Value = "Click Me" },
        new() { Name = "variant", Label = "Variant", EditorType = SbPropertyEditorType.Select, 
                Value = "primary",
                Options = new SbPropertyOption[]
                {
                    new() { Value = "primary", Label = "Primary" },
                    new() { Value = "secondary", Label = "Secondary" },
                    new() { Value = "outlined", Label = "Outlined" }
                }
        },
        new() { Name = "disabled", Label = "Disabled", EditorType = SbPropertyEditorType.Checkbox, Value = false }
    };
}

Dynamic Properties from Object

@code {
    private Element selectedElement;
    
    private List<SbPropertyDefinition> GetPropertiesFromElement()
    {
        return new List<SbPropertyDefinition>
        {
            new() { Name = "id", Label = "ID", EditorType = SbPropertyEditorType.Text, 
                    Value = selectedElement.Id, Required = true },
            new() { Name = "x", Label = "X Position", EditorType = SbPropertyEditorType.Number, 
                    Value = selectedElement.X },
            new() { Name = "y", Label = "Y Position", EditorType = SbPropertyEditorType.Number, 
                    Value = selectedElement.Y },
            new() { Name = "background", Label = "Background", EditorType = SbPropertyEditorType.Color, 
                    Value = selectedElement.BackgroundColor }
        };
    }
    
    private void HandleChange(SbPropertyChangeEventArgs args)
    {
        switch (args.Property.Name)
        {
            case "id": selectedElement.Id = args.NewValue?.ToString(); break;
            case "x": selectedElement.X = Convert.ToDouble(args.NewValue); break;
            case "y": selectedElement.Y = Convert.ToDouble(args.NewValue); break;
            case "background": selectedElement.BackgroundColor = args.NewValue?.ToString(); break;
        }
    }
}