Blazor - Get Started with ToggleButton

Blazor - Get Started with Smart.ToggleButton

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup Basic ToggleButton

Smart.ToggleButton is a custom element that can be toggled On and Off. It is typically used in a group of other ToggleButtons

  1. Add the ToggleButton component to the Pages/Index.razor file
  2. Optionally, set the name, value and check state of the ToggleButton:
    <ToggleButton Checked="true" Name="toggle" Value="enabled">Toggle</ToggleButton>
Basic ToggleButton

Check Mode

Check Mode determines the necessary action to change the state of the element. When CheckMode is set to Press - its state is changed when pressing the button.
When it is Hover - it is changed by hovering over the button.

<ToggleButton Checked="true" Name="dark-theme" Value="enabled" ToggleMode="ToggleButtonToggleMode.Drag"></ToggleButton>
ToggleButton hover

ToggleButton Events

Smart.ToggleButton provides multiple events that can help you expand the component's functionality.
Each event object has unique event.detail parameters.

  • OnChange - triggered when the widget is checked/unchecked.
    Event Details: dynamic value, dynamic oldValue, dynamic changeType
  • OnCheckValue - triggered when the component is checked.
    Event Details: dynamic changeType
  • OnUncheckValue - triggered when the component is unchecked.
    Event Details: dynamic changeType

The demo below uses the OnChange Event to apply custom CSS to an element:

      font-weight: @boldness;
      text-decoration: @underline;
      font-style: @italics;
<ToggleButton @ref="@boldBtn" OnChange="Bold">Bold</ToggleButton>
<ToggleButton @ref="@underlineBtn" OnChange="Underline">Underline</ToggleButton>
<ToggleButton @ref="@italicsBtn" OnChange="Italics">Italics</ToggleButton>
<h3>Some text</h3>

    ToggleButton boldBtn;
    ToggleButton underlineBtn;
    ToggleButton italicsBtn;

    string boldness = "400";
    string underline = "none";
    string italics = "normal";

    private void Bold(Event ev){
        ToggleButtonChangeEventDetail detail = ev["Detail"];
            boldness = "bold";
            boldness = "400";
    private void Underline(Event ev){
        ToggleButtonChangeEventDetail detail = ev["Detail"];
            underline = "underline";
            underline = "none";
    private void Italics(Event ev){
        ToggleButtonChangeEventDetail detail = ev["Detail"];
            italics = "italic";
            italics = "normal";
ToggleButton event

Two-way Value Binding

The ToggleButton component also supports two-way value binding:

<ToggleButton @bind-Checked="@toggleValue">Bold</ToggleButton>

    bool toggleValue = true;
ToggleButton value binding