Tesserae - Tutorial Modal

TutorialModal

Description

The TutorialModal is a surface component used to display a guided tutorial or multi-step process to the user. It provides a structured modal layout with an explanatory section on the left and a content area on the right where complex input forms or guided instructions can be embedded. Use this component when you need to create a rich, interactive modal that not only displays information but also collects user input through embedded controls.

Usage

Import the necessary namespaces and instantiate the TutorialModal using the helper method from Tesserae.UI. The component follows a fluent interface style, allowing you to chain settings for title, help text, images, content, footer commands, and dimensions.

tutorial-modal-sample.js

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()
        {
            TutorialModal tutorialModal = null;
            tutorialModal = TutorialModal("Welcome", "Enter data to proceed")
                .SetImageSrc("./assets/img/tutorial.svg", 16.px())
                .SetContent(
                     VStack().S().ScrollY().Children(
                         Label("Username").SetContent(TextBox().SetPlaceholder("Enter your username")),
                         Label("Password").SetContent(TextBox().SetPlaceholder("Enter your password"))
                     )
                )
                .SetFooterCommands(
                     Button("Cancel").OnClick((s, e) => tutorialModal.Hide()),
                     Button("Submit").Primary().OnClick((s, e) => tutorialModal.Hide())
                )
                .Width(800.px())
                .Height(500.px());

            // To show the modal:
            tutorialModal.Show();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(tutorialModal);
        }
    }

}

API reference

class

TutorialModal

public class TutorialModal : IComponent, ISpecialCaseStyling

A specialized Modal component designed for showing tutorials or onboarding information, featuring a split layout with an explanation area and a content area.

Constructors

Constructor

TutorialModal

public TutorialModal(string title, string helpText, string imageSrc = null)

Initializes a new instance of the TutorialModal class.

Parameters

title: The title of the tutorial.
helpText: The help text or description.
imageSrc: An optional image source URL for the illustration.

Properties

Property

TutorialModal.StylingContainer

public HTMLElement StylingContainer

Gets the styling container for the tutorial modal.

Property

TutorialModal.PropagateToStackItemParent

public bool PropagateToStackItemParent

Gets whether styling should propagate to the stack item parent.

Methods

Method

TutorialModal.SetFooterCommands

public TutorialModal SetFooterCommands(params IComponent[] commands)

Sets the footer command components.

Parameters

commands: The command components.

Returns

The current instance of the type.

Method

TutorialModal.SetContent

public TutorialModal SetContent(IComponent content)

Sets the main content of the tutorial modal.

Parameters

content: The content component.

Returns

The current instance of the type.

Method

TutorialModal.Height

public TutorialModal Height(UnitSize height)

Sets the height of the tutorial modal.

Parameters

height: The height.

Returns

The current instance of the type.

Method

TutorialModal.H

public TutorialModal H(UnitSize height)

Sets the height of the tutorial modal.

Parameters

height: The height.

Returns

The current instance of the type.

Method

TutorialModal.Width

public TutorialModal Width(UnitSize width)

Sets the width of the tutorial modal.

Parameters

width: The width.

Returns

The current instance of the type.

Method

TutorialModal.W

public TutorialModal W(UnitSize width)

Sets the width of the tutorial modal.

Parameters

width: The width.

Returns

The current instance of the type.

Method

TutorialModal.SetTitle

public TutorialModal SetTitle(string title)

Sets the title of the tutorial modal.

Parameters

title: The title.

Returns

The current instance of the type.

Method

TutorialModal.SetHelpText

public TutorialModal SetHelpText(string helpText, bool treatAsHTML = false)

Sets the help text of the tutorial modal.

Parameters

helpText: The help text.
treatAsHTML: Whether to treat the help text as HTML.

Returns

The current instance of the type.

Method

TutorialModal.SetImageSrc

public TutorialModal SetImageSrc(string imageSrc, UnitSize padding)

Sets the illustration image source URL and padding.

Parameters

imageSrc: The image source URL.
padding: The padding around the image.

Returns

The current instance of the type.

Method

TutorialModal.SetImage

public TutorialModal SetImage(Image image, UnitSize padding)

Sets the illustration image and padding.

Parameters

image: The image component.
padding: The padding around the image.

Returns

The current instance of the type.

Method

TutorialModal.LightDismiss

public TutorialModal LightDismiss()

Enables light dismiss (closing the modal when clicking outside of it).

Returns

The current instance of the type.

Method

TutorialModal.NoLightDismiss

public TutorialModal NoLightDismiss()

Disables light dismiss.

Returns

The current instance of the type.

Method

TutorialModal.ContentPadding

public TutorialModal ContentPadding(string padding)

Sets the padding for the content area.

Parameters

padding: The padding.

Returns

The current instance of the type.

Method

TutorialModal.ShowEmbedded

public IComponent ShowEmbedded()

Returns the tutorial modal as an embedded component rather than showing it as a modal layer.

Returns

An IComponent representing the embedded modal.

Method

TutorialModal.Border

public TutorialModal Border(string color, UnitSize size = null)

Sets the border color and size for the tutorial modal.

Parameters

color: The border color.
size: The border size.

Returns

The current instance of the type.

Method

TutorialModal.Show

public TutorialModal Show()

Shows the tutorial modal.

Returns

The current instance of the type.

Method

TutorialModal.OnHide

public TutorialModal OnHide(Modal.OnHideHandler onHide)

Adds a hide event handler to the tutorial modal.

Parameters

onHide: The hide event handler.

Returns

The current instance of the type.

Method

TutorialModal.OnShow

public TutorialModal OnShow(Modal.OnShowHandler onShow)

Adds a show event handler to the tutorial modal.

Parameters

onShow: The show event handler.

Returns

The current instance of the type.

Method

TutorialModal.Hide

public void Hide(Action onHidden = null)

Hides the tutorial modal.

Parameters

onHidden: An optional action to perform when the modal is hidden.

Method

TutorialModal.Render

public dom.HTMLElement Render()

Renders the tutorial modal.

Returns

The rendered HTMLElement.

Samples

This sample demonstrates how to create and display a basic TutorialModal with a custom title, help text, image, content inputs, and footer commands.

tutorial-modal-2-sample.js

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 sample = new TutorialModalExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

    public class TutorialModalExample : IComponent
    {
        public HTMLElement Render()
        {
            TutorialModal tutorialModal = null;
            tutorialModal = TutorialModal("Getting Started", "Complete the fields below to begin:")
                .SetImageSrc("./assets/img/tutorial.svg", 16.px())
                .SetContent(
                    VStack().S().ScrollY().Children(
                        Label("Field 1").SetContent(TextBox().SetPlaceholder("Enter value...")),
                        Label("Field 2").SetContent(TextBox().SetPlaceholder("Enter value...")),
                        Label("Field 3").SetContent(TextBox().SetPlaceholder("Enter value..."))
                    )
                )
                .SetFooterCommands(
                    Button("Cancel").OnClick((s, e) => tutorialModal.Hide()),
                    Button("Submit").Primary().OnClick((s, e) => tutorialModal.Hide())
                )
                .Width(800.px())
                .Height(500.px());

            return Button("Open Modal").Primary().OnClick((s, e) => tutorialModal.Show()).Render();
        }
    }
}

This sample shows how to embed a TutorialModal within an existing container.

tutorial-modal-3-sample.js

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 sample = new EmbeddedTutorialModalExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

    public class EmbeddedTutorialModalExample : IComponent
    {
        public HTMLElement Render()
        {
            var container = Raw();

            TutorialModal tutorialModal = null;
            tutorialModal = TutorialModal("Embedded Modal", "This modal is embedded in the page.")
                .SetImageSrc("./assets/img/embedded.svg", 16.px())
                .SetContent(
                    VStack().S().ScrollY().Children(
                        Label("Detail 1").SetContent(TextBox().SetPlaceholder("Enter detail...")),
                        Label("Detail 2").SetContent(TextBox().SetPlaceholder("Enter detail..."))
                    )
                )
                .SetFooterCommands(
                    Button("Close").OnClick((s, e) => tutorialModal.Hide())
                );

            // Embed the modal into an existing container
            container.Content(tutorialModal.ShowEmbedded());
            return container.Render();
        }
    }
}

TutorialModal

Description

Usage

API reference

Constructors

TutorialModal

Parameters

Properties

TutorialModal.StylingContainer

TutorialModal.PropagateToStackItemParent

Methods

TutorialModal.SetFooterCommands

Parameters

Returns

TutorialModal.SetContent

Parameters

Returns

TutorialModal.Height

Parameters

Returns

TutorialModal.H

Parameters

Returns

TutorialModal.Width

Parameters

Returns

TutorialModal.W

Parameters

Returns

TutorialModal.SetTitle

Parameters

Returns

TutorialModal.SetHelpText

Parameters

Returns

TutorialModal.SetImageSrc

Parameters

Returns

TutorialModal.SetImage

Parameters

Returns

TutorialModal.LightDismiss

Returns

TutorialModal.NoLightDismiss

Returns

TutorialModal.ContentPadding

Parameters

Returns

TutorialModal.ShowEmbedded

Returns

TutorialModal.Border

Parameters

Returns

TutorialModal.Show

Returns

TutorialModal.OnHide

Parameters

Returns

TutorialModal.OnShow

Parameters

Returns

TutorialModal.Hide

Parameters

TutorialModal.Render

Returns

Samples

Basic Tutorial Modal

Embedded Tutorial Modal

See also