# Tutorial Modal

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.

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.

using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

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

• SetFooterCommands(params IComponent[] commands)
  Sets the footer commands buttons of the modal.
  • Parameter: commands – a variable list of IComponent instances for footer actions.

• SetContent(IComponent content)
  Sets the main content area of the modal.
  • Parameter: content – the component to display in the content area.

• Height(UnitSize height)
  Sets the height of the modal. Also adjusts the internal stacks' heights.
  • Parameter: height – the desired height as a UnitSize.

• H(UnitSize height)
  Alias for Height.

• Width(UnitSize width)
  Sets the overall width of the modal.
  • Parameter: width – the desired width as a UnitSize.

• W(UnitSize width)
  Alias for Width.

• SetTitle(string title)
  Sets the title text in the tutorial modal’s explanation section.
  • Parameter: title – the title string.

• SetHelpText(string helpText, bool treatAsHTML = false)
  Sets the help text beneath the title. Optionally treats the text as HTML.
  • Parameters:
  ‣ helpText – the help text string.
  ‣ treatAsHTML – if true, the text is rendered as HTML.

• SetImageSrc(string imageSrc, UnitSize padding)
  Sets an image in the illustration area using the image source URL and applies the specified padding.
  • Parameters:
  ‣ imageSrc – the URL of the image.
  ‣ padding – the padding as a UnitSize.

• SetImage(Image image, UnitSize padding)
  Sets an image component in the illustration area.
  • Parameters:
  ‣ image – an Image component.
  ‣ padding – the padding as a UnitSize.

• LightDismiss()
  Enables the modal to be dismissed by clicking outside of it.

• NoLightDismiss()
  Disables light dismiss behavior.

• ContentPadding(string padding)
  Customizes the padding of the content area.
  • Parameter: padding – the padding value as a string.

• ShowEmbedded()
  Renders the modal as an embedded component instead of a popup.
  • Returns: an IComponent that represents the embedded modal.

• Border(string color, UnitSize size = null)
  Sets the border color and width for the modal's styling container.
  • Parameters:
  ‣ color – the border color as a string.
  ‣ size – the border width as a UnitSize (defaults to 1 pixel if not provided).

• Show()
  Displays the modal.

• OnHide(Modal.OnHideHandler onHide)
  Registers a callback to be executed when the modal is hidden.
  • Parameter: onHide – the callback handler.

• OnShow(Modal.OnShowHandler onShow)
  Registers a callback to be executed when the modal is shown.
  • Parameter: onShow – the callback handler.

• Hide(Action onHidden = null)
  Hides the modal, optionally providing a callback that is executed after the modal is hidden.
  • Parameter: onHidden – an optional callback action.

• StylingContainer (HTMLElement)
  Gets the HTML element that serves as the container for custom styling of the modal.

• PropagateToStackItemParent (bool)
  Indicates whether the styling propagation should pass to the parent of the stack item.

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

using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class TutorialModalExample
{
    public static void Main()
    {
        var 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());

        // Display the modal
        tutorialModal.Show();
    }
}

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

using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class EmbeddedTutorialModalExample
{
    public static void Main()
    {
        var container = Raw();

        var 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());
        document.body.AppendChild(container.Render());
    }
}

• Dialog – For quick user interactions with simple choices.
• Modal – Underlying modal component that powers the TutorialModal.
• Panel – Another container component for surface interactions.