Tesserae - Dialog

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.

dialog-sample.cs

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();
                }
            }
}

API reference

class

Dialog

public sealed class Dialog

A modal dialog with a title, body and configurable action buttons (OK / Cancel / custom).

Namespace: Tesserae

Constructors

Name	Description
Dialog	Initializes a new instance of this class.

Constructor

Dialog

public Dialog(IComponent content = null, IComponent title = null, bool centerContent = true)

Initializes a new instance of this class.

Properties

Name	Description
IsDraggable	Gets or sets a value indicating whether the component can be dragged by the user.
IsDark	Gets or sets a value indicating whether the component uses the dark colour theme.

Property

Dialog.IsDraggable

public bool IsDraggable { get ; set ; }

Gets or sets a value indicating whether the component can be dragged by the user.

Property

Dialog.IsDark

public bool IsDark { get ; set ; }

Gets or sets a value indicating whether the component uses the dark colour theme.

Methods

Name	Description
Title	Gets or sets the title of the component.
Content	Sets the content rendered inside the surface.
Commands	Adds the given components to the dialog's command row.
Dark	Applies the dark colour scheme to the component.
MinHeight	Gets or sets the CSS min-height of the component.
Height	Gets or sets the CSS height of the component.
Ok	Shows OK button actions on the dialog and wires up the callback.
OkCancel	Shows OK / Cancel button actions on the dialog and wires up the callbacks.
YesNo	Shows Yes / No button actions on the dialog and wires up the callbacks.
YesNoCancel	Shows Yes / No / Cancel button actions on the dialog and wires up the callbacks.
RetryCancel	Shows Retry / Cancel button actions on the dialog and wires up the callbacks.
Show	Shows the component.
Hide	Hides the component.
Draggable	Makes the surface draggable.
OkAsync	Awaitable variant of `Ok` that resolves with the user's response.
OkCancelAsync	Awaitable variant of `OkCancel` that resolves with the user's response.
YesNoAsync	Awaitable variant of `YesNo` that resolves with the user's response.
YesNoCancelAsync	Awaitable variant of `YesNoCancel` that resolves with the user's response.
RetryCancelAsync	Awaitable variant of `RetryCancel` that resolves with the user's response.

Method

Dialog.Title

public Dialog Title(IComponent title)

Gets or sets the title of the component.

Method

Dialog.Content

public Dialog Content(IComponent content)

Sets the content rendered inside the surface.

Method

Dialog.Commands

public Dialog Commands(params IComponent[] content)

Adds the given components to the dialog's command row.

Method

Dialog.Dark

public Dialog Dark()

Applies the dark colour scheme to the component.

Method

Dialog.MinHeight

public Dialog MinHeight(UnitSize unitSize)

Gets or sets the CSS min-height of the component.

Method

Dialog.Height

public Dialog Height(UnitSize unitSize)

Gets or sets the CSS height of the component.

Method

Dialog.Ok

public void Ok(Action onOk, Func<Button, Button> btnOk = null)

Shows OK button actions on the dialog and wires up the callback.

Method

Dialog.OkCancel

public void OkCancel(Action onOk = null, Action onCancel = null, Func<Button, Button> btnOk = null, Func<Button, Button> btnCancel = null)

Shows OK / Cancel button actions on the dialog and wires up the callbacks.

Method

Dialog.YesNo

public void YesNo(Action onYes = null, Action onNo = null, Func<Button, Button> btnYes = null, Func<Button, Button> btnNo = null)

Shows Yes / No button actions on the dialog and wires up the callbacks.

Method

Dialog.YesNoCancel

public void 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)

Shows Yes / No / Cancel button actions on the dialog and wires up the callbacks.

Method

Dialog.RetryCancel

public void RetryCancel(Action onRetry = null, Action onCancel = null, Func<Button, Button> btnRetry = null, Func<Button, Button> btnCancel = null)

Shows Retry / Cancel button actions on the dialog and wires up the callbacks.

Method

Dialog.Show

public void Show()

Shows the component.

Method

Dialog.Hide

public void Hide(Action onHidden = null)

Hides the component.

Method

Dialog.Draggable

public Dialog Draggable()

Makes the surface draggable.

Method

Dialog.OkAsync

public Task<Response> OkAsync(Func<Button, Button> btnOk = null)

Awaitable variant of Ok that resolves with the user's response.

Method

Dialog.OkCancelAsync

public Task<Response> OkCancelAsync(Func<Button, Button> btnOk = null, Func<Button, Button> btnCancel = null)

Awaitable variant of OkCancel that resolves with the user's response.

Method

Dialog.YesNoAsync

public Task<Response> YesNoAsync(Func<Button, Button> btnYes = null, Func<Button, Button> btnNo = null)

Awaitable variant of YesNo that resolves with the user's response.

Method

Dialog.YesNoCancelAsync

public Task<Response> YesNoCancelAsync(Func<Button, Button> btnYes = null, Func<Button, Button> btnNo = null, Func<Button, Button> btnCancel = null)

Awaitable variant of YesNoCancel that resolves with the user's response.

Method

Dialog.RetryCancelAsync

public Task<Response> RetryCancelAsync(Func<Button, Button> btnRetry = null, Func<Button, Button> btnCancel = null)

Awaitable variant of RetryCancel that resolves with the user's response.

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.

dialog-2-sample.cs

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.

dialog-3-sample.cs

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();
        }
    }
}

Dialog

Description

Usage

API reference

Constructors

Dialog

Properties

Dialog.IsDraggable

Dialog.IsDark

Methods

Dialog.Title

Dialog.Content

Dialog.Commands

Dialog.Dark

Dialog.MinHeight

Dialog.Height

Dialog.Ok

Dialog.OkCancel

Dialog.YesNo

Dialog.YesNoCancel

Dialog.RetryCancel

Dialog.Show

Dialog.Hide

Dialog.Draggable

Dialog.OkAsync

Dialog.OkCancelAsync

Dialog.YesNoAsync

Dialog.YesNoCancelAsync

Dialog.RetryCancelAsync

Samples

Basic Dialog Example

Using Confirmation Methods

See also