# Dialog

The Dialog component is a modal overlay that is used to display temporary content and gather user confirmation or input. It blocks interaction with the underlying application until it is dismissed. This component is ideal for quick, actionable interactions requiring a decision, such as confirmation dialogs or small forms.

Dialogs are created with a fluent interface using the Tesserae.UI static helper. You can customize the dialog's header, content, and command buttons. Additional features include dark overlay and draggable mode. The example below initializes a dialog with a title, content, and custom command buttons.

using System;
using Tesserae;
using static Tesserae.UI;

public class DialogExample
{
    public void ShowDialog()
    {
        var dialog = Dialog(TextBlock("Dialog Title"))
                        .Content(Stack().Children(
                            TextBlock("This is some content inside the dialog."),
                            Toggle("Enable Feature").OnChange((c, ev) => Console.WriteLine("Toggle changed!"))
                        ))
                        .Commands(
                            Button("Confirm").Primary().OnClick((c, ev) => dialog.Hide()),
                            Button("Cancel").OnClick((c, ev) => dialog.Hide())
                        );

        // Optionally, enable draggable
        dialog.Draggable();

        // Show the dialog
        dialog.Show();
    }
}

• Title(IComponent title)
  • Sets the header of the dialog.
  • Parameters: title (IComponent) – the component to display as the dialog header.
  • Returns: Dialog – the current instance for fluent chaining.

• Content(IComponent content)
  • Sets or updates the main content of the dialog.
  • Parameters: content (IComponent) – the component to display as the dialog content.
  • Returns: Dialog – the current instance for fluent chaining.

• Commands(params IComponent[] content)
  • Sets the footer of the dialog with one or more command buttons.
  • Parameters: content (IComponent[]) – buttons or other components acting as command triggers.
  • Returns: Dialog – the current instance for fluent chaining.

• Dark()
  • Configures the dialog to use a dark overlay when displayed.
  • Returns: Dialog – the current instance for fluent chaining.

• MinHeight(UnitSize unitSize)
  • Sets the minimum height of the dialog.
  • Parameters: unitSize (UnitSize) – the minimum height specification.

• Height(UnitSize unitSize)
  • Sets a fixed height for the dialog.
  • Parameters: unitSize (UnitSize) – the height specification.

• Ok(Action onOk, Func<Button, Button> btnOk = null)
  • Displays the dialog with a single "Ok" button.
  • Parameters: onOk (Action) – callback when "Ok" is clicked; btnOk (Func<Button, Button>, optional) – modifier for the "Ok" button.

• OkCancel(Action onOk = null, Action onCancel = null, Func<Button, Button> btnOk = null, Func<Button, Button> btnCancel = null)
  • Displays the dialog with "Ok" and "Cancel" buttons.
  • Parameters: onOk (Action, optional) – callback for "Ok"; onCancel (Action, optional) – callback for "Cancel"; btnOk and btnCancel (Func<Button, Button>, optional) – modifiers for the buttons.

• YesNo(Action onYes = null, Action onNo = null, Func<Button, Button> btnYes = null, Func<Button, Button> btnNo = null)
  • Displays the dialog with "Yes" and "No" buttons.
  • Parameters: onYes (Action, optional) – callback for "Yes"; onNo (Action, optional) – callback for "No"; btnYes and btnNo (Func<Button, Button>, optional) – modifiers for the buttons.

• YesNoCancel(Action onYes = null, Action onNo = null, Action onCancel = null, Func<Button, Button> btnYes = null, Func<Button, Button> btnNo = null, Func<Button, Button> btnCancel = null)
  • Displays the dialog with "Yes", "No", and "Cancel" buttons.
  • Parameters: onYes (Action, optional), onNo (Action, optional), onCancel (Action, optional) – callbacks for respective buttons; btnYes, btnNo, btnCancel (Func<Button, Button>, optional) – modifiers for the buttons.

• RetryCancel(Action onRetry = null, Action onCancel = null, Func<Button, Button> btnRetry = null, Func<Button, Button> btnCancel = null)
  • Displays the dialog with "Retry" and "Cancel" buttons.
  • Parameters: onRetry (Action, optional) – callback for "Retry"; onCancel (Action, optional) – callback for "Cancel"; btnRetry and btnCancel (Func<Button, Button>, optional) – modifiers for the buttons.

• Show()
  • Displays the dialog on screen.

• Hide(Action onHidden = null)
  • Hides the dialog.
  • Parameters: onHidden (Action, optional) – callback to execute after hiding the dialog.

• Draggable()
  • Sets the dialog to be draggable.
  • Returns: Dialog – the current instance for fluent chaining.

• OkAsync(Func<Button, Button> btnOk = null)
  • Displays the dialog with an "Ok" button and returns a Task that resolves when the dialog is handled.
  • Parameters: btnOk (Func<Button, Button>, optional) – modifier for the "Ok" button.
  • Returns: Task

• OkCancelAsync(Func<Button, Button> btnOk = null, Func<Button, Button> btnCancel = null)
  • Similar to OkAsync, but with "Ok" and "Cancel" buttons.
  • Returns: Task

• YesNoAsync(Func<Button, Button> btnYes = null, Func<Button, Button> btnNo = null)
  • Displays the dialog with "Yes" and "No" buttons and returns a Task that resolves with the user's response.
  • Returns: Task

• YesNoCancelAsync(Func<Button, Button> btnYes = null, Func<Button, Button> btnNo = null, Func<Button, Button> btnCancel = null)
  • Displays the dialog with "Yes", "No", and "Cancel" buttons and returns a Task that resolves with the user's response.
  • Returns: Task

• RetryCancelAsync(Func<Button, Button> btnRetry = null, Func<Button, Button> btnCancel = null)
  • Displays the dialog with "Retry" and "Cancel" buttons and returns a Task that resolves with the user's response.
  • Returns: Task

• IsDraggable
  • Type: bool
  • Gets or sets whether the dialog is draggable.

• IsDark
  • Type: bool
  • Gets or sets whether the dialog uses a dark overlay.

This sample demonstrates how to create a simple dialog with a title, content, and command buttons. It also shows how to enable draggable functionality.

using System;
using Tesserae;
using static Tesserae.UI;

public class BasicDialogSample
{
    public void ShowBasicDialog()
    {
        // Create the dialog with a title
        var dialog = Dialog(TextBlock("Basic Dialog"));

        // Set the main content of the dialog
        dialog.Content(Stack().Children(
            TextBlock("This is a simple dialog example."),
            Toggle("Enable Draggable").OnChange((c, ev) => dialog.IsDraggable = c.IsChecked)
        ));

        // Configure the dialog's command buttons
        dialog.Commands(
            Button("Submit").Primary().OnClick((c, ev) => dialog.Hide()),
            Button("Cancel").OnClick((c, ev) => dialog.Hide())
        );

        // Enable dragging behavior
        dialog.Draggable();

        // Display the dialog
        dialog.Show();
    }
}

This sample illustrates the usage of the built-in confirmation methods such as YesNo and YesNoCancel.

using System;
using Tesserae;
using static Tesserae.UI;

public class ConfirmationDialogSample
{
    public void OpenConfirmationDialog()
    {
        // Create a dialog with Yes and No options
        Dialog("Confirm Action")
            .Content(TextBlock("Do you want to proceed?"))
            .YesNo(
                onYes: () => Console.WriteLine("User clicked Yes"),
                onNo: () => Console.WriteLine("User clicked No")
            );
    }
}

• Modal
• Panel