Dialoge Demo

Dialoge & Overlays

Alle Dialog-Varianten: mit/ohne Header, mit/ohne Close-Button, fixer Breite und eingebettetem Formular. Außerdem DialogService für programmatischen Aufruf ohne Markup.

Standard (auto-Breite)

Header + Close

Kein Close

Kein Header

Mit Submit-Formular

Submit + Header

Fixe Breite (700px)

700 px

CloseOnBackdropClick

Overlay-Verhalten

DialogService

Programmatischer Aufruf via DialogService. <DialogHost /> muss einmalig im Layout eingebunden sein.

ConfirmAsync

Ergebnis: –

AlertAsync

WirklichLoeschenAsync

Ergebnis: –

OpenAsync<TComponent>

Ergebnis: –

Erweiterbarkeit

DialogService ist ableitbar. Im Consuming-Projekt einfach eine eigene Klasse erstellen, bestehende Methoden überschreiben oder neue hinzufügen – DialogHost muss nicht angepasst werden.

1. Eigene Klasse ableiten

public class AppDialogService : DialogService
{
    // Bestehende Methode überschreiben
    public override Task<bool> WirklichLoeschenAsync(string nachricht = "Eintrag archivieren?")
        => ZeigenAsync(nachricht, "Archivieren", "Ja, archivieren", "Abbrechen", OoColorPalette.Warning, true);

    // Eigene neue Methode hinzufügen
    public Task<bool> VeroeffentlichenAsync()
        => ZeigenAsync("Der Beitrag wird öffentlich sichtbar.", "Veröffentlichen?",
               "Veröffentlichen", "Abbrechen", OoColorPalette.Success, true);
}

2. In Program.cs registrieren (statt Basis-Klasse)

builder.Services.AddScoped<DialogService, AppDialogService>();

3. Fertig – DialogHost muss nicht angepasst werdenDialogHost injiziert DialogService und bekommt via DI-Polymorphismus automatisch die abgeleitete Klasse. Alle eigenen Methoden stehen überall per @inject AppDialogService DialogService zur Verfügung.

class & style

class

style

SKILL.md – Dialog

---
name: Dialog
description: Onesown Blazor Komponente Dialog (Feedback). Verwende diesen Skill wenn du die Dialog-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# Dialog

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Feedback  
**Basisklasse:** `IDisposable`  

Modaler Dialog mit konfigurierbarem Header, Inhalt und Footer-Buttons. Unterstützt Two-Way-Binding für die Sichtbarkeit (@bind-Show), optionalen Close-X-Button, Formular-Validierung via OnValidSubmit und frei wählbare Breite.

**Live-Demo:** https://components.schini.com/demo/dialog  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Show`` | ``bool`` | ``false`` | Steuert die Sichtbarkeit des Dialogs. true = geöffnet, false = geschlossen. Standard: false. |
| ``ShowChanged`` | ``EventCallback<bool>`` |  | Ermöglicht Two-Way-Binding (@bind-Show). Wird automatisch aufgerufen wenn der Dialog sich selbst schließt. |
| ``Header`` | ``RenderFragment`` |  | Beliebiges Markup im Header-Bereich. Hat Vorrang vor HeaderText, wenn beides gesetzt ist. |
| ``HeaderText`` | ``string`` | ``""`` | Titeltext im Header. Wird nur angezeigt wenn kein Header-RenderFragment gesetzt ist. |
| ``Content`` | ``RenderFragment`` |  | Hauptinhalt des Dialogs als beliebiges Markup. |
| ``Buttons`` | ``RenderFragment`` |  | Footer-Bereich des Dialogs, typischerweise mit Aktions-Buttons (Speichern, Abbrechen, …). |
| ``Width`` | ``string`` | ``"auto"`` | Breite des Dialogs. Beliebiger CSS-Wert (z.B. "600px", "80%") oder "auto" für content-basierte Breite. Leer/null = auto |
| ``CloseOnBackdropClick`` | ``bool`` | ``true`` | Schließt den Dialog bei Klick auf den Backdrop. Standard: true. |
| ``ShowHeader`` | ``bool?`` |  | Steuert ob der Header-Bereich gerendert wird. Wenn null (Standard): Header erscheint automatisch sobald HeaderText/Header gesetzt ist oder ein Close-X vorhanden ist. Explizit auf false setzen um den Header komplett zu unterdrücken. |
| ``OnClose`` | ``EventCallback`` |  | Wenn gesetzt, erscheint oben rechts ein X-Button der diesen Callback auslöst. |
| ``ShowClose`` | ``bool`` | ``true`` | Blendet den Close-X-Button aus. Standard: true (sichtbar, sofern OnClose gesetzt). |
| ``OnValidSubmit`` | ``EventCallback<Form>`` |  | Wird aufgerufen nachdem das Formular im Dialog erfolgreich validiert wurde. Liefert das Form-Objekt. |
| ``AktiviereDirtyFlag`` | ``bool`` | ``false`` | Aktiviert das Dirty-Flag: Beim Schließen mit ungespeicherten Änderungen erscheint eine Sicherheitsabfrage. Standard: false. |

## Hinweise

- Öffnen/Schließen: @bind-Show="_show" für Two-Way-Binding; Show="true" für rein einseitiges Binding
- Schließen per Backdrop: CloseOnBackdropClick="false" verhindert das Schließen bei Klick außerhalb
- Eigener Header: Header-RenderFragment hat Vorrang vor HeaderText; für keinen Header ShowHeader="false" setzen
- Close-Button: OnClose="HandleClose" registriert einen Callback und zeigt das X; ShowClose="false" blendet es aus
- Formular-Modus: OnValidSubmit empfängt das Form-Objekt nach erfolgreicher Validierung
- Dirty-Flag: AktiviereDirtyFlag="true" warnt beim Schließen bei ungespeicherten Änderungen
- Breite: Width="600px" oder Width="80%" – ohne Angabe passt sich der Dialog dem Inhalt an