Tesserae - Toast

Toast

Description

The Toast component provides short-lived notifications that alert users with important messages, such as success, information, warning, or error notifications. Designed as a utility element, Toast uses a layered approach to overlay messages on top of the existing content. It offers a variety of display positions (e.g., top right, top left, bottom centers, full-width at the top or bottom) and can also be configured to display as a banner with an optional hide button.

Usage

Import the required namespaces and instantiate Toast using the static helper methods from Tesserae.UI. You can configure the position, duration, and style before firing one of the notification methods. For example, the following code displays an information toast in the default top-right position:

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

    public class ToastExample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Show Toast").OnClick((s, e) =>
            {
                // Display an information toast in the top right (default)
                Toast().Information("Info", "This is an information toast.");
            }).Render();
        }
    }
}

API reference

class

Toast

public class Toast : Layer<Toast>

A Toast component for displaying non-blocking notifications to the user.

Properties

Property

Toast.DefaultPosition

public static Position DefaultPosition { get; set; }

Gets or sets the default position for toasts.

Methods

Method

Toast.Class

public Toast Class(string className)

Adds a CSS class to the toast container.

Parameters

className: The class name.

Returns

The current instance of the type.

Method

Toast.RemoveClass

public Toast RemoveClass(string className)

Removes a CSS class from the toast container.

Parameters

className: The class name.

Returns

The current instance of the type.

Method

Toast.TopRight

public Toast TopRight()

Sets the toast position to top-right.

Returns

The current instance of the type.

Method

Toast.TopCenter

public Toast TopCenter()

Sets the toast position to top-center.

Returns

The current instance of the type.

Method

Toast.TopLeft

public Toast TopLeft()

Sets the toast position to top-left.

Returns

The current instance of the type.

Method

Toast.BottomRight

public Toast BottomRight()

Sets the toast position to bottom-right.

Returns

The current instance of the type.

Method

Toast.BottomCenter

public Toast BottomCenter()

Sets the toast position to bottom-center.

Returns

The current instance of the type.

Method

Toast.BottomLeft

public Toast BottomLeft()

Sets the toast position to bottom-left.

Returns

The current instance of the type.

Method

Toast.TopFull

public Toast TopFull()

Sets the toast position to top-full width.

Returns

The current instance of the type.

Method

Toast.BottomFull

public Toast BottomFull()

Sets the toast position to bottom-full width.

Returns

The current instance of the type.

Method

Toast.Banner

public Toast Banner(bool showHideButton = true)

Displays the toast as a banner at the top or bottom of the page.

Parameters

showHideButton: Whether to show a button to hide the banner.

Returns

The current instance of the type.

Method

Toast.Duration

public Toast Duration(TimeSpan timeSpan)

Sets the duration for which the toast is visible.

Parameters

timeSpan: The duration.

Returns

The current instance of the type.

Method

Toast.Success

public Toast Success(IComponent title, IComponent message)

Displays a success toast.

Parameters

title: The title of the toast.
message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Information

public Toast Information(IComponent title, IComponent message)

Displays an information toast.

Parameters

title: The title of the toast.
message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Warning

public Toast Warning(IComponent title, IComponent message)

Displays a warning toast.

Parameters

title: The title of the toast.
message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Error

public Toast Error(IComponent title, IComponent message)

Displays an error toast.

Parameters

title: The title of the toast.
message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Success

public Toast Success(IComponent message)

Displays a success toast with only a message.

Parameters

message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Information

public Toast Information(IComponent message)

Displays an information toast with only a message.

Parameters

message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Warning

public Toast Warning(IComponent message)

Displays a warning toast with only a message.

Parameters

message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Error

public Toast Error(IComponent message)

Displays an error toast with only a message.

Parameters

message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Success

public Toast Success(string title, string message)

Displays a success toast with string content.

Parameters

title: The title of the toast.
message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Information

public Toast Information(string title, string message)

Displays an information toast with string content.

Parameters

title: The title of the toast.
message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Warning

public Toast Warning(string title, string message)

Displays a warning toast with string content.

Parameters

title: The title of the toast.
message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Error

public Toast Error(string title, string message)

Displays an error toast with string content.

Parameters

title: The title of the toast.
message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Success

public Toast Success(string message)

Displays a success toast with string message.

Parameters

message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Information

public Toast Information(string message)

Displays an information toast with string message.

Parameters

message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Warning

public Toast Warning(string message)

Displays a warning toast with string message.

Parameters

message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Error

public Toast Error(string message)

Displays an error toast with string message.

Parameters

message: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Width

public Toast Width(UnitSize width)

Sets the width of the toast.

Parameters

width: The width.

Returns

The current instance of the type.

Method

Toast.Height

public Toast Height(UnitSize height)

Sets the height of the toast.

Parameters

height: The height.

Returns

The current instance of the type.

Method

Toast.NoDismiss

public Toast NoDismiss(bool value = true)

Prevents the toast from being dismissed when clicked.

Parameters

value: Whether to prevent dismissal on click.

Returns

The current instance of the type.

Method

Toast.Overwrite

public Toast Overwrite(bool value = true)

Prevents the toast from being overwritten by a new toast with the same content.

Parameters

value: Whether to prevent overwriting.

Returns

The current instance of the type.

Method

Toast.Hide

public override void Hide(Action onHidden = null)

Hides the toast.

Parameters

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

Method

Toast.Remove

public void Remove()

Removes the toast.

Samples

Basic Toast Notification

Displays an informational toast in the default top-right position.

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

    public class BasicToastSample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Show Toast").OnClick((s, e) =>
            {
                // Displays an informational toast on the top right.
                Toast().Information("Info", "This is a basic information toast.");
            }).Render();
        }
    }
}

Toast Notifications in Different Positions

Demonstrates how to display toast notifications in various positions, including as a banner.

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

    public class PositionToastSample : IComponent
    {
        public HTMLElement Render()
        {
            return Stack().Children(
                Button("Top Right").OnClick((s, e) =>
                    Toast().Information("Info", "Displayed at top right")),
                Button("Top Left").OnClick((s, e) =>
                    Toast().TopLeft().Success("Success", "Displayed at top left")),
                Button("Bottom Right").OnClick((s, e) =>
                    Toast().BottomRight().Warning("Warning", "Displayed at bottom right")),
                Button("Banner").OnClick((s, e) =>
                    Toast().TopFull().Banner().Error("Error", "This toast is acting as a banner"))
            ).Render();
        }
    }
}