syncfusion-blazor-popups

What this skill does

# Implementing Syncfusion Blazor Popups

## Dialog

The [Syncfusion Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) component provides a flexible, feature-rich solution for creating modal and modeless dialogs in Blazor applications. Dialogs are essential UI elements for displaying alerts, confirmations, forms, and interactive content overlaid on the main application.

### Component Overview

The Dialog component supports:
- **Template-based layouts** (header, content, footer with custom HTML/components)
- **Multiple interaction modes** (modal and modeless)
- **Rich event system** (lifecycle, drag, resize, overlay interactions)
- **Advanced positioning** (fixed, absolute, relative, centered)
- **Interactive features** (draggable, resizable, minimize/maximize buttons, fullscreen mode)
- **Accessibility support** (WCAG compliance, keyboard navigation, ARIA attributes)
- **Animations** (open/close transitions)
- **State management** (visible binding, state persistence)

### Documentation and Navigation Guide

#### Getting Started
📄 **Read:** [references/getting-started.md](references/dialog-getting-started.md)
- Installation and NuGet package setup
- Blazor WebAssembly and Server project configuration
- Adding namespaces and Syncfusion services
- Basic dialog implementation
- CSS imports and theme configuration
- Displaying header, content, and setting visibility

#### Templates and Content Customization
📄 **Read:** [references/templates.md](references/dialog-templates.md)
- Header template with custom HTML and icons
- Content template with forms and Blazor components
- Footer template and custom buttons
- DialogTemplates structure
- Embedding complex UI elements in dialogs

#### Dialog Buttons
📄 **Read:** [references/dialog-buttons.md](references/dialog-buttons.md)
- DialogButton component configuration
- Button placement and click handlers
- Using DialogButtons vs FooterTemplate
- Standard button patterns and common use cases

#### Events and Interactions
📄 **Read:** [references/events.md](references/dialog-events.md)
- Lifecycle events (Created, Destroyed)
- Opening and closing events (OnOpen, Opened, OnClose, Closed)
- Drag events (OnDragStart, OnDrag, OnDragStop)
- Resize events (OnResizeStart, Resizing, OnResizeStop)
- Modal overlay interactions (OnOverlayModalClick)

#### Positioning and Visibility
📄 **Read:** [references/positioning-visibility.md](references/dialog-positioning-visibility.md)
- Position property (fixed, absolute, relative)
- Visible binding for show/hide control
- Target element configuration
- Dialog centering on page
- Width and height configuration
- Z-index management

#### Dialog Behavior and Features
📄 **Read:** [references/dialog-behavior.md](references/dialog-behavior.md)
- Modal vs modeless dialogs
- AllowDragging and EnableResize properties
- AllowPrerender for performance optimization
- ShowCloseIcon configuration
- Creating nested dialogs
- Animation support
- IsModal and overlay behavior

#### Methods and Programmatic Control
📄 **Read:** [references/methods.md](references/dialog-methods.md)
- ShowAsync() to open dialogs programmatically
- ShowAsync(true) to open dialogs in fullscreen mode
- HideAsync() to close dialogs programmatically
- GetDimension() to retrieve dialog size
- GetButton(index) and GetButtonItems() for button access
- RefreshPositionAsync() for position recalculation
- Complete control examples

#### Advanced Customization and Styling
📄 **Read:** [references/advanced-customization.md](references/dialog-advanced-customization.md)
- CSS class customization and styling
- Appearance customization
- Accessibility features (WCAG compliance, keyboard navigation)
- Animation configurations
- State persistence strategies with EnablePersistence
- Minimize/Maximize button implementation
- Localization support
- Responsive dialog design

### Quick Start

#### Basic Dialog

```csharp
@using Syncfusion.Blazor.Popups

<SfDialog Width="300px" Header="Welcome">
    <DialogTemplates>
        <Content>This is a basic dialog with content.</Content>
    </DialogTemplates>
</SfDialog>
```

#### Dialog with Show/Hide Control

```csharp
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<div id="target">
    <SfButton OnClick="@OpenDialog">Open Dialog</SfButton>
    
    <SfDialog Target="#target" Width="400px" Header="Confirmation" 
              ShowCloseIcon="true" @bind-Visible="IsVisible">
        <DialogTemplates>
            <Content>Are you sure you want to proceed?</Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton Content="OK" IconCss="e-icons e-ok-icon" IsPrimary="true" OnClick="@OnOkClick" />
            <DialogButton Content="Cancel" IconCss="e-icons e-close-icon" OnClick="@OnCancelClick" />
        </DialogButtons>
    </SfDialog>
</div>

@code {
    private bool IsVisible { get; set; } = false;
    
    private void OpenDialog() => IsVisible = true;
    
    private void OnOkClick()
    {
        // Handle OK action
        IsVisible = false;
    }
    
    private void OnCancelClick()
    {
        // Handle Cancel action
        IsVisible = false;
    }
}
```

### Common Patterns

#### Alert Dialog
```csharp
<SfDialog Width="350px" IsModal="true" Header="Alert">
    <DialogTemplates>
        <Content>This action cannot be undone.</Content>
    </DialogTemplates>
</SfDialog>
```

#### Form Dialog
```csharp
<SfDialog Width="400px" Header="User Information">
    <DialogTemplates>
        <Content>
            <div class="form-group">
                <input type="text" placeholder="Enter name" />
            </div>
        </Content>
    </DialogTemplates>
</SfDialog>
```

#### Draggable and Resizable Dialog
```csharp
<SfDialog Width="400px" Header="Features" AllowDragging="true" EnableResize="true">
    <DialogTemplates>
        <Content>You can drag and resize this dialog.</Content>
    </DialogTemplates>
</SfDialog>
```

#### Fullscreen Dialog
```csharp
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<SfButton OnClick="@OpenFullScreenDialog">Open Fullscreen Dialog</SfButton>

<SfDialog @ref="DialogRef" Width="250px" ShowCloseIcon="true" Visible="false">
    <DialogTemplates>
        <Header>Dialog</Header>
        <Content>This is a fullscreen dialog</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />
        <DialogButton Content="Cancel" OnClick="@CloseDialog" />
    </DialogButtons>
</SfDialog>

@code {
    SfDialog DialogRef;

    private async Task OpenFullScreenDialog()
    {
        await this.DialogRef.ShowAsync(true);
    }

    private async Task CloseDialog()
    {
        await this.DialogRef.HideAsync();
    }
}
```

### Key Properties

| Property | Type | Purpose |
|----------|------|---------|
| `Width` | string | Sets dialog width (e.g., "400px", "50%"). Default: "100%" |
| `Height` | string | Sets dialog height (e.g., "300px", "70%"). Default: "auto" |
| `Header` | string | Sets dialog header text |
| `Content` | string | Sets dialog content text |
| `Visible` | bool | Controls dialog visibility. Supports @bind-Visible. Default: true |
| `IsModal` | bool | Makes dialog modal (overlay blocking interaction). Default: false |
| `ShowCloseIcon` | bool | Shows close button in header. Default: false |
| `AllowDragging` | bool | Enables dialog dragging by header. Default: false |
| `EnableResize` | bool | Enables dialog resizing. Default: false |
| `CloseOnEscape` | bool | Closes dialog when Escape key is pressed. Default: true |
| `AnimationSettings` | DialogAnimationSettings | Configures open/close animations (effect, duration, delay). Default: Fade effect, 400ms |
| `Position` | string | Positioning mode: "fixed" (stays on screen), "absolute" (relative to target), or "relative" (document flow). Default: "fixed" |
| `Left` | string | X-coordinate position (e.g., "100px", "20%"). Works with Position property.