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

SbInspectorSection

A collapsible section within an SbInspectorPanel. Groups related properties together with an expandable/collapsible header.

Parameters

Parameter	Type	Default	Description
Title	string	""	Section title
DefaultExpanded	bool	true	Initial expanded state
Class	string?	null	Additional CSS classes

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment?	Section content
Badge	RenderFragment?	Optional badge shown next to title

CSS Classes

• sb-inspector-section - Base class
• sb-inspector-section--expanded - Expanded state
• sb-inspector-section__header - Clickable header
• sb-inspector-section__chevron - Expand/collapse indicator
• sb-inspector-section__title - Title text
• sb-inspector-section__badge - Badge container
• sb-inspector-section__content - Content area

Examples

Basic Section

<SbInspectorSection Title="Layout">
    <SbNumberField Label="Width" @bind-Value="width" />
    <SbNumberField Label="Height" @bind-Value="height" />
</SbInspectorSection>

Initially Collapsed

<SbInspectorSection Title="Advanced" DefaultExpanded="false">
    <SbTextField Label="Custom CSS" @bind-Value="customCss" />
    <SbTextField Label="Custom ID" @bind-Value="customId" />
</SbInspectorSection>

With Badge

<SbInspectorSection Title="Filters">
    <Badge>
        <SbBadge Value="@activeFilters" Color="SbColor.Primary" />
    </Badge>
    <ChildContent>
        <SbCheckbox Label="Show Active" @bind-Value="showActive" />
        <SbCheckbox Label="Show Completed" @bind-Value="showCompleted" />
    </ChildContent>
</SbInspectorSection>

Multiple Sections in Panel

<SbInspectorPanel Title="Element Properties">
    <Sections>
        <SbInspectorSection Title="Position">
            <SbStack Direction="SbDirection.Row" Gap="SbSpacing.Sm">
                <SbNumberField Label="X" @bind-Value="x" />
                <SbNumberField Label="Y" @bind-Value="y" />
            </SbStack>
        </SbInspectorSection>
        
        <SbInspectorSection Title="Size">
            <SbStack Direction="SbDirection.Row" Gap="SbSpacing.Sm">
                <SbNumberField Label="W" @bind-Value="width" />
                <SbNumberField Label="H" @bind-Value="height" />
            </SbStack>
            <SbCheckbox Label="Lock Aspect Ratio" @bind-Value="lockRatio" />
        </SbInspectorSection>
        
        <SbInspectorSection Title="Appearance" DefaultExpanded="true">
            <SbColorPicker Label="Fill" @bind-Value="fillColor" />
            <SbSlider Label="Opacity" @bind-Value="opacity" Min="0" Max="100" />
        </SbInspectorSection>
        
        <SbInspectorSection Title="Effects" DefaultExpanded="false">
            <Badge>
                @if (hasEffects)
                {
                    <span class="effect-indicator">●</span>
                }
            </Badge>
            <ChildContent>
                <SbSlider Label="Blur" @bind-Value="blur" Min="0" Max="20" />
                <SbSlider Label="Shadow" @bind-Value="shadow" Min="0" Max="50" />
            </ChildContent>
        </SbInspectorSection>
    </Sections>
</SbInspectorPanel>

Typography Inspector

<SbInspectorSection Title="Typography">
    <SbSelect Label="Font" @bind-Value="fontFamily">
        <SbSelectOption Value="sans-serif">Sans Serif</SbSelectOption>
        <SbSelectOption Value="serif">Serif</SbSelectOption>
        <SbSelectOption Value="monospace">Monospace</SbSelectOption>
    </SbSelect>
    
    <SbStack Direction="SbDirection.Row" Gap="SbSpacing.Sm">
        <SbNumberField Label="Size" @bind-Value="fontSize" />
        <SbNumberField Label="Line Height" @bind-Value="lineHeight" />
    </SbStack>
    
    <SbSelect Label="Weight" @bind-Value="fontWeight">
        <SbSelectOption Value="300">Light</SbSelectOption>
        <SbSelectOption Value="400">Regular</SbSelectOption>
        <SbSelectOption Value="500">Medium</SbSelectOption>
        <SbSelectOption Value="700">Bold</SbSelectOption>
    </SbSelect>
    
    <SbColorPicker Label="Color" @bind-Value="textColor" />
</SbInspectorSection>

Dynamic Sections

@foreach (var group in propertyGroups)
{
    <SbInspectorSection Title="@group.Name" DefaultExpanded="@group.IsDefault">
        @foreach (var prop in group.Properties)
        {
            @RenderPropertyEditor(prop)
        }
    </SbInspectorSection>
}