144 lines
4.5 KiB
Markdown
144 lines
4.5 KiB
Markdown
# 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
|
|
|
|
```razor
|
|
<SbInspectorSection Title="Layout">
|
|
<SbNumberField Label="Width" @bind-Value="width" />
|
|
<SbNumberField Label="Height" @bind-Value="height" />
|
|
</SbInspectorSection>
|
|
```
|
|
|
|
### Initially Collapsed
|
|
|
|
```razor
|
|
<SbInspectorSection Title="Advanced" DefaultExpanded="false">
|
|
<SbTextField Label="Custom CSS" @bind-Value="customCss" />
|
|
<SbTextField Label="Custom ID" @bind-Value="customId" />
|
|
</SbInspectorSection>
|
|
```
|
|
|
|
### With Badge
|
|
|
|
```razor
|
|
<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
|
|
|
|
```razor
|
|
<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
|
|
|
|
```razor
|
|
<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
|
|
|
|
```razor
|
|
@foreach (var group in propertyGroups)
|
|
{
|
|
<SbInspectorSection Title="@group.Name" DefaultExpanded="@group.IsDefault">
|
|
@foreach (var prop in group.Properties)
|
|
{
|
|
@RenderPropertyEditor(prop)
|
|
}
|
|
</SbInspectorSection>
|
|
}
|
|
```
|