Tesserae - Toggle

Toggle

Description

The Toggle component represents a physical switch that allows users to turn a setting on or off. It is ideal for binary operations that take effect immediately when toggled, such as enabling or disabling services or hardware features. As part of the Components group in Tesserae, Toggle provides a fluent interface for configuring its appearance and behavior while automatically updating its on/off label based on its state.

Usage

The Toggle is instantiated through the Tesserae.UI static helper. You can configure text labels, the checked state, and the enabled/disabled state using its fluent methods or public properties.

Below is an example that demonstrates the basic usage of the Toggle:

toggle-sample.js

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()
        {
            // Create a toggle that starts checked and is enabled.
            var toggle = Toggle()
                .Checked()
                .SetText("Custom Toggle Text");

            // Alternatively, disable the toggle.
            var disabledToggle = Toggle().Disabled();

            var component = Stack().Children(
                TextBlock("Enabled and Checked:"),
                toggle,
                TextBlock("Disabled Toggle:"),
                disabledToggle
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Public Properties

Text
- Type: string
- Description: Gets or sets the custom text displayed on the Toggle. When set, it overrides the default on/off labels by hiding the automatic label container if a non-empty string is provided.
IsEnabled
- Type: bool
- Description: Indicates whether the Toggle is enabled. A disabled Toggle will visually appear inactive and will not respond to click events.
IsChecked
- Type: bool
- Description: Represents the current checked state of the Toggle. Changing this value updates the visual indicator and the underlying observable that tracks this state.

API reference

class

Toggle

public class Toggle : ComponentBase<Toggle, HTMLInputElement>, IObservableComponent<bool>, IRoundedStyle, ITextFormating

A Toggle component that allows users to switch between two states (on/off).

Constructors

Constructor

Toggle

public Toggle(IComponent onText = null, IComponent offText = null)

Initializes a new instance of the Toggle class.

Parameters

onText: The text to display when the toggle is on.
offText: The text to display when the toggle is off.

Properties

Property

Toggle.Text

public string Text { get ; set ; }

Gets or sets toggle text

Property

Toggle.IsEnabled

public bool IsEnabled { get ; set ; }

Gets or sets whenever Toggle is enabled

Property

Toggle.IsChecked

public bool IsChecked { get ; set ; }

Gets or sets whenever Toggle is checked

Property

Toggle.Size

public TextSize Size { get ; set ; }

Gets or sets the text size.

Property

Toggle.Weight

public TextWeight Weight { get ; set ; }

Gets or sets the text weight.

Property

Toggle.TextAlign

public TextAlign TextAlign { get ; set ; }

Gets or sets the text alignment.

Methods

Method

Toggle.Render

public override HTMLElement Render()

Renders the toggle component.

Returns

The rendered HTMLElement.

Method

Toggle.SetText

public Toggle SetText(string text)

Sets the text of the toggle.

Parameters

text: The text.

Returns

The current instance of the type.

Method

Toggle.Disabled

public Toggle Disabled(bool value = true)

Sets whether the toggle is disabled.

Parameters

value: Whether to disable the toggle.

Returns

The current instance of the type.

Method

Toggle.Checked

public Toggle Checked(bool value = true)

Sets whether the toggle is checked.

Parameters

value: Whether to check the toggle.

Returns

The current instance of the type.

Method

Toggle.AsObservable

public IObservable<bool> AsObservable()

Returns an observable that tracks the checked state of the toggle.

Returns

An observable.

Samples

Basic Toggle Usage

This sample demonstrates how to instantiate and configure multiple Toggle states including checked, unchecked, enabled, and disabled toggles. It also shows how to use inline labels.

toggle-2-sample.js

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 component = Stack().Children(
                TextBlock("Enabled and Checked:"),
                Label("Toggle On").SetContent(Toggle().Checked()),

                TextBlock("Enabled and Unchecked:"),
                Label("Toggle Off").SetContent(Toggle()),

                TextBlock("Disabled and Checked:"),
                Label("Disabled Toggle On").SetContent(Toggle().Checked().Disabled()),

                TextBlock("Disabled and Unchecked:"),
                Label("Disabled Toggle Off").SetContent(Toggle().Disabled()),

                TextBlock("Toggle with inline label:"),
                Label("Inline Toggle").Inline().SetContent(Toggle()),

                TextBlock("Disabled inline toggle:"),
                Label("Disabled Inline Toggle").Inline().SetContent(Toggle().Disabled()),

                Toggle("With inline label and without onText and offText"),
                Toggle("Disabled with inline label and without onText and offText").Disabled()
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Toggle

Description

Usage

Public Properties

API reference

Toggle

Constructors

Toggle

Parameters

Properties

Toggle.Text

Toggle.IsEnabled

Toggle.IsChecked

Toggle.Size

Toggle.Weight

Toggle.TextAlign

Methods

Toggle.Render

Returns

Toggle.SetText

Parameters

Returns

Toggle.Disabled

Parameters

Returns

Toggle.Checked

Parameters

Returns

Toggle.AsObservable

Returns

Samples

Basic Toggle Usage

See also

Referenced by