178 lines
5.7 KiB
Markdown
178 lines
5.7 KiB
Markdown
# SbInspectorPanel
|
|
|
|
A collapsible properties panel for inspecting and editing selected elements. Commonly used as a sidebar in visual builders and design tools.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Title | string | "Properties" | Panel title |
|
|
| Collapsible | bool | true | Whether panel can be collapsed |
|
|
| Collapsed | bool | false | Current collapsed state |
|
|
| Class | string? | null | Additional CSS classes |
|
|
|
|
## Events
|
|
|
|
| Event | Type | Description |
|
|
|-------|------|-------------|
|
|
| CollapsedChanged | EventCallback<bool> | Fired when collapsed state changes |
|
|
|
|
## Templates / Slots
|
|
|
|
| Slot | Type | Description |
|
|
|------|------|-------------|
|
|
| ChildContent | RenderFragment? | Panel content (used when Sections is not provided) |
|
|
| Sections | RenderFragment? | Container for SbInspectorSection components |
|
|
| HeaderActions | RenderFragment? | Action buttons in the header |
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-inspector-panel` - Base class
|
|
- `sb-inspector-panel--collapsed` - Collapsed state
|
|
- `sb-inspector-panel__header` - Header container
|
|
- `sb-inspector-panel__title` - Title text
|
|
- `sb-inspector-panel__toggle` - Collapse toggle button
|
|
- `sb-inspector-panel__header-actions` - Header actions container
|
|
- `sb-inspector-panel__body` - Body content area
|
|
|
|
## Examples
|
|
|
|
### Basic Inspector Panel
|
|
|
|
```razor
|
|
<SbInspectorPanel Title="Properties">
|
|
<SbTextField Label="Name" @bind-Value="name" />
|
|
<SbNumberField Label="Width" @bind-Value="width" />
|
|
<SbNumberField Label="Height" @bind-Value="height" />
|
|
</SbInspectorPanel>
|
|
```
|
|
|
|
### With Sections
|
|
|
|
```razor
|
|
<SbInspectorPanel Title="Element Inspector">
|
|
<Sections>
|
|
<SbInspectorSection Title="Layout" DefaultExpanded="true">
|
|
<SbNumberField Label="X" @bind-Value="x" />
|
|
<SbNumberField Label="Y" @bind-Value="y" />
|
|
<SbNumberField Label="Width" @bind-Value="width" />
|
|
<SbNumberField Label="Height" @bind-Value="height" />
|
|
</SbInspectorSection>
|
|
|
|
<SbInspectorSection Title="Appearance">
|
|
<SbColorPicker Label="Background" @bind-Value="bgColor" />
|
|
<SbSlider Label="Opacity" @bind-Value="opacity" Min="0" Max="100" />
|
|
<SbNumberField Label="Border Radius" @bind-Value="borderRadius" />
|
|
</SbInspectorSection>
|
|
|
|
<SbInspectorSection Title="Typography" DefaultExpanded="false">
|
|
<SbSelect Label="Font Family" @bind-Value="fontFamily" Items="@fonts" />
|
|
<SbNumberField Label="Font Size" @bind-Value="fontSize" />
|
|
<SbColorPicker Label="Color" @bind-Value="textColor" />
|
|
</SbInspectorSection>
|
|
</Sections>
|
|
</SbInspectorPanel>
|
|
```
|
|
|
|
### With Header Actions
|
|
|
|
```razor
|
|
<SbInspectorPanel Title="Component Settings">
|
|
<HeaderActions>
|
|
<SbIconButton Icon="refresh" Size="SbSize.Sm" OnClick="Reset" />
|
|
<SbIconButton Icon="copy" Size="SbSize.Sm" OnClick="CopyStyles" />
|
|
</HeaderActions>
|
|
<ChildContent>
|
|
<!-- Properties -->
|
|
</ChildContent>
|
|
</SbInspectorPanel>
|
|
```
|
|
|
|
### Controlled Collapse
|
|
|
|
```razor
|
|
<SbInspectorPanel Title="Details"
|
|
Collapsible="true"
|
|
Collapsed="@isCollapsed"
|
|
CollapsedChanged="@(v => isCollapsed = v)">
|
|
<p>Panel content here</p>
|
|
</SbInspectorPanel>
|
|
|
|
<SbButton OnClick="() => isCollapsed = !isCollapsed">
|
|
@(isCollapsed ? "Expand" : "Collapse")
|
|
</SbButton>
|
|
|
|
@code {
|
|
private bool isCollapsed = false;
|
|
}
|
|
```
|
|
|
|
### Non-Collapsible Panel
|
|
|
|
```razor
|
|
<SbInspectorPanel Title="Required Settings" Collapsible="false">
|
|
<SbTextField Label="ID" @bind-Value="elementId" Required="true" />
|
|
</SbInspectorPanel>
|
|
```
|
|
|
|
### Visual Builder Sidebar
|
|
|
|
```razor
|
|
<aside class="builder-sidebar">
|
|
@if (selectedElement != null)
|
|
{
|
|
<SbInspectorPanel Title="@selectedElement.Type">
|
|
<HeaderActions>
|
|
<SbIconButton Icon="trash"
|
|
Size="SbSize.Sm"
|
|
OnClick="DeleteElement" />
|
|
</HeaderActions>
|
|
<Sections>
|
|
<SbInspectorSection Title="Content">
|
|
@switch (selectedElement.Type)
|
|
{
|
|
case "text":
|
|
<SbTextArea Label="Text" @bind-Value="selectedElement.Content" />
|
|
break;
|
|
case "image":
|
|
<SbTextField Label="Image URL" @bind-Value="selectedElement.Src" />
|
|
<SbTextField Label="Alt Text" @bind-Value="selectedElement.Alt" />
|
|
break;
|
|
}
|
|
</SbInspectorSection>
|
|
|
|
<SbInspectorSection Title="Style">
|
|
<SbPropertyGrid Properties="@GetStyleProperties()"
|
|
OnPropertyChanged="UpdateStyle" />
|
|
</SbInspectorSection>
|
|
</Sections>
|
|
</SbInspectorPanel>
|
|
}
|
|
else
|
|
{
|
|
<SbEmptyState Title="No Selection"
|
|
Description="Select an element to edit its properties" />
|
|
}
|
|
</aside>
|
|
```
|
|
|
|
### Multiple Panels
|
|
|
|
```razor
|
|
<div class="inspector-container">
|
|
<SbInspectorPanel Title="Transform" Collapsed="false">
|
|
<SbNumberField Label="X" @bind-Value="x" />
|
|
<SbNumberField Label="Y" @bind-Value="y" />
|
|
</SbInspectorPanel>
|
|
|
|
<SbInspectorPanel Title="Fill" Collapsed="true">
|
|
<SbColorPicker Label="Color" @bind-Value="fillColor" />
|
|
</SbInspectorPanel>
|
|
|
|
<SbInspectorPanel Title="Stroke" Collapsed="true">
|
|
<SbColorPicker Label="Color" @bind-Value="strokeColor" />
|
|
<SbNumberField Label="Width" @bind-Value="strokeWidth" />
|
|
</SbInspectorPanel>
|
|
</div>
|
|
```
|