165 lines
4.3 KiB
Markdown
165 lines
4.3 KiB
Markdown
# SbDropZone
|
|
|
|
A designated area that accepts dragged items. Provides visual feedback during drag operations and can filter acceptable item types.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| PlaceholderText | string | "Drag items here" | Text shown when zone is empty |
|
|
| DropText | string | "Drop here" | Text shown during drag over |
|
|
| AcceptedTypes | string[]? | null | Array of accepted item types (null accepts all) |
|
|
| Disabled | bool | false | Whether the zone accepts drops |
|
|
| Class | string? | null | Additional CSS classes |
|
|
|
|
## Events
|
|
|
|
| Event | Type | Description |
|
|
|-------|------|-------------|
|
|
| OnItemDropped | EventCallback<SbDropEventArgs> | Fired when item is dropped |
|
|
| OnDragEnter | EventCallback | Fired when drag enters zone |
|
|
| OnDragExit | EventCallback | Fired when drag leaves zone |
|
|
|
|
## Templates / Slots
|
|
|
|
| Slot | Type | Description |
|
|
|------|------|-------------|
|
|
| ChildContent | RenderFragment? | Content to show inside the zone |
|
|
|
|
## SbDropEventArgs Class
|
|
|
|
| Property | Type | Description |
|
|
|----------|------|-------------|
|
|
| ClientX | double | X coordinate of drop |
|
|
| ClientY | double | Y coordinate of drop |
|
|
| Data | object? | Dropped data |
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-dropzone` - Base class
|
|
- `sb-dropzone--drag-over` - Item is being dragged over
|
|
- `sb-dropzone--disabled` - Disabled state
|
|
- `sb-dropzone__indicator` - Drop indicator
|
|
- `sb-dropzone__placeholder` - Empty placeholder
|
|
- `sb-dropzone__icon` - Icon element
|
|
- `sb-dropzone__text` - Text element
|
|
|
|
## Examples
|
|
|
|
### Basic Drop Zone
|
|
|
|
```razor
|
|
<SbDropZone OnItemDropped="HandleDrop" />
|
|
|
|
@code {
|
|
private void HandleDrop(SbDropEventArgs args)
|
|
{
|
|
Console.WriteLine($"Dropped at ({args.ClientX}, {args.ClientY})");
|
|
}
|
|
}
|
|
```
|
|
|
|
### With Custom Placeholder
|
|
|
|
```razor
|
|
<SbDropZone PlaceholderText="Drop components here"
|
|
DropText="Release to add"
|
|
OnItemDropped="HandleDrop" />
|
|
```
|
|
|
|
### With Type Filtering
|
|
|
|
```razor
|
|
<SbDropZone AcceptedTypes="@(new[] { "widget", "component" })"
|
|
PlaceholderText="Drop widgets or components here"
|
|
OnItemDropped="HandleDrop" />
|
|
```
|
|
|
|
### With Content
|
|
|
|
```razor
|
|
<SbDropZone OnItemDropped="HandleDrop">
|
|
@if (droppedItems.Any())
|
|
{
|
|
@foreach (var item in droppedItems)
|
|
{
|
|
<div class="dropped-item">@item.Name</div>
|
|
}
|
|
}
|
|
</SbDropZone>
|
|
```
|
|
|
|
### Page Builder Canvas
|
|
|
|
```razor
|
|
<div class="page-builder">
|
|
<aside class="toolbox">
|
|
<SbDraggableItem Data="@textBlock" ItemType="block">
|
|
<div class="tool">📝 Text</div>
|
|
</SbDraggableItem>
|
|
<SbDraggableItem Data="@imageBlock" ItemType="block">
|
|
<div class="tool">🖼️ Image</div>
|
|
</SbDraggableItem>
|
|
</aside>
|
|
|
|
<main class="canvas">
|
|
<SbDropZone AcceptedTypes="@(new[] { "block" })"
|
|
PlaceholderText="Drag blocks to build your page"
|
|
DropText="Drop to add block"
|
|
OnItemDropped="AddBlock"
|
|
OnDragEnter="ShowDropGuide"
|
|
OnDragExit="HideDropGuide">
|
|
@foreach (var block in pageBlocks)
|
|
{
|
|
<div class="page-block">
|
|
@block.Content
|
|
</div>
|
|
}
|
|
</SbDropZone>
|
|
</main>
|
|
</div>
|
|
|
|
@code {
|
|
private List<Block> pageBlocks = new();
|
|
|
|
private void AddBlock(SbDropEventArgs args)
|
|
{
|
|
if (args.Data is Block block)
|
|
{
|
|
pageBlocks.Add(block);
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Multiple Drop Zones
|
|
|
|
```razor
|
|
<div class="kanban-board">
|
|
@foreach (var column in columns)
|
|
{
|
|
<div class="kanban-column">
|
|
<h3>@column.Title</h3>
|
|
<SbDropZone AcceptedTypes="@(new[] { "task" })"
|
|
OnItemDropped="e => MoveTask(e, column.Id)"
|
|
PlaceholderText="Drop tasks here">
|
|
@foreach (var task in column.Tasks)
|
|
{
|
|
<SbDraggableItem Data="@task" ItemType="task">
|
|
<div class="task-card">@task.Title</div>
|
|
</SbDraggableItem>
|
|
}
|
|
</SbDropZone>
|
|
</div>
|
|
}
|
|
</div>
|
|
```
|
|
|
|
### Disabled Drop Zone
|
|
|
|
```razor
|
|
<SbDropZone Disabled="@isReadOnly"
|
|
PlaceholderText="@(isReadOnly ? "Read-only mode" : "Drop items here")"
|
|
OnItemDropped="HandleDrop" />
|
|
```
|