#
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:
using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;
public class ToggleExample : IComponent
{
public HTMLElement Render()
{
// Create a toggle that starts checked and is enabled.
var toggle = Toggle()
.Checked() // Sets the toggle to checked.
.SetText("Custom Toggle Text");
// Alternatively, disable the toggle.
var disabledToggle = Toggle().Disabled();
// Render the toggle in a container.
return SectionStack()
.Title(TextBlock("Toggle Example"))
.Section(
Stack().Children(
TextBlock("Enabled and Checked:"),
toggle,
TextBlock("Disabled Toggle:"),
disabledToggle
)
).Render();
}
}
#
Methods
SetText(string text)
- Sets the text content of the Toggle.
- Parameters:
- text: The string to display as the text for the toggle. If non-empty, it hides the automatic on/off text.
- Returns: The instance of Toggle (for fluent chaining).
Disabled(bool value = true)
- Enables or disables the Toggle.
- Parameters:
- value: When true, disables the Toggle; when false, enables it.
- Returns: The instance of Toggle.
Checked(bool value = true)
- Sets the Toggle's checked state.
- Parameters:
- value: When true, the Toggle is set to checked; when false, it is unchecked.
- Returns: The instance of Toggle.
AsObservable()
- Returns an observable representing the checked state of the Toggle.
- Returns: An IObservable
that can be used to subscribe to state changes.
#
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.
#
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.
using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;
public class ToggleSample : IComponent
{
public HTMLElement Render()
{
return SectionStack()
.Title(TextBlock("Toggle Component Sample"))
.Section(
Stack().Children(
TextBlock("Enabled and Checked:"),
// Creates a toggle that is enabled and set to checked.
Label("Toggle On").SetContent(Toggle().Checked()),
TextBlock("Enabled and Unchecked:"),
// Creates a toggle that is enabled and unchecked.
Label("Toggle Off").SetContent(Toggle()),
TextBlock("Disabled and Checked:"),
// Creates a disabled toggle that is checked.
Label("Disabled Toggle On").SetContent(Toggle().Checked().Disabled()),
TextBlock("Disabled and Unchecked:"),
// Creates a disabled toggle that is unchecked.
Label("Disabled Toggle Off").SetContent(Toggle().Disabled()),
TextBlock("Toggle with inline label:"),
// Creates an inline toggle.
Label("Inline Toggle").Inline().SetContent(Toggle()),
TextBlock("Disabled inline toggle:"),
// Creates an inline disabled toggle.
Label("Disabled Inline Toggle").Inline().SetContent(Toggle().Disabled()),
// Creating toggles with a custom inline label without passing onText/offText.
Toggle("With inline label and without onText and offText"),
Toggle("Disabled with inline label and without onText and offText").Disabled()
)
).Render();
}
}