Dialog

Description

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.

Usage

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 System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var btn = Button("Show").OnClick((s, e) => new DialogExample().ShowDialog());
            document.body.style.overflow = "hidden";
            MountCenteredToBody(btn);
        }
    }

    public class DialogExample
    {
                public void ShowDialog()
                {
                    Dialog dialog = null;
                    dialog = Dialog(TextBlock("Dialog Title"))
                                    .Content(Stack().Children(
                                        TextBlock("This is some content inside the dialog."),
                                        Toggle("Enable Feature").OnChange((c, ev) => console.log("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();
                }
            }
}

Methods

• 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

Properties

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

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

Samples

Basic Dialog Example

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 System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new BasicDialogSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class BasicDialogSample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Show dialog").Primary().OnClick((s, e) =>
            {
                // Create the dialog with a title
                Dialog dialog = null;
                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();
            }).Render();
        }
    }
}

Using Confirmation Methods

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new ConfirmationDialogSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ConfirmationDialogSample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Confirm Action").OnClick((s, e) =>
            {
                // Create a dialog with Yes and No options
                Dialog("Confirm Action")
                    .Content(TextBlock("Do you want to proceed?"))
                    .YesNo(
                        onYes: () => console.log("User clicked Yes"),
                        onNo: () => console.log("User clicked No")
                    );
            }).Render();
        }
    }
}

See also

• Modal
• Panel