first commit
This commit is contained in:
@@ -0,0 +1,177 @@
|
||||
# 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>
|
||||
```
|
||||
Reference in New Issue
Block a user