Skip to content

Latest commit

 

History

History
108 lines (78 loc) · 4.21 KB

overview.md

File metadata and controls

108 lines (78 loc) · 4.21 KB
title page_title description slug tags published position
Overview
ToggleButton Overview
Overview of the ToggleButton for Blazor and its major features.
togglebutton-overview
telerik,blazor,Toggle,button,overview
true
0

Blazor ToggleButton Overview

This article provides information about the Blazor ToggleButton component and its core features.

The ToggleButton component can have a selected state, which is the main difference from the [regular Telerik UI for Blazor Button]({%slug components/button/overview%}). The two-state styling depends on the [chosen theme]({%slug themes-overview%}). The ToggleButton also provides [events]({%slug togglebutton-events%}), [declarative appearance customization]({%slug togglebutton-appearance%}) and can nest [icons]({%slug togglebutton-icons%}).

Creating Blazor ToggleButton

  1. Use the <TelerikToggleButton> tag.
  2. Set the Selected parameter to a bool property. Use two-way binding, or one-way binding with a [SelectedChanged handler]({%slug togglebutton-events%}#selectedchanged).
  3. Handle the [OnClick event]({%slug togglebutton-events%}#onclick).
  4. (optional) Add an [icon]({%slug togglebutton-icons%}) or configure the [appearance]({%slug togglebutton-appearance%}).

caption Basic Telerik ToggleButton

<TelerikToggleButton @bind-Selected="@IsSelected"
                     OnClick="@OnToggleButtonClick">
    Selected: <strong>@IsSelected</strong>
</TelerikToggleButton>

<p> @result </p>

@code {
    bool IsSelected { get; set; } = true;

    string result { get; set; }

    async Task OnToggleButtonClick()
    {
        string currentState = IsSelected ? "ON" : "OFF";
        result = $"The user clicked the {currentState} state";
    }
}

Events

The Toggle Button exposes events for clicks and selected state changes. Find more in the [Toggle Button Events article]({%slug togglebutton-events%}).

Icons

The Toggle Button provides a built-in way to render [Telerik font icons, custom font icons, images or sprites]({%slug togglebutton-icons%}).

Appearance

The Toggle Button provides several parameters that control its [styling and appearance, including background color, rounded corners and fill]({%slug togglebutton-appearance%}).

ToggleButton Parameters

The following table lists Toggle Button parameters, which are not discussed elsewhere. Check the ToggleButton API Reference for a full list of properties, methods and events.

@template

Parameter Type and Default Value Description
AriaLabel string Renders an aria-label HTML attribute to the button element.
Class string Renders additional CSS class to the <button class="k-button"> element. Use it to apply custom styles or [override the theme]({%slug themes-override%}). See Custom Styling below.
Enabled bool
(true)		 Determines if the button is enabled and accepts clicks.
Id string Renders an id HTML attribute to the button element.
TabIndex int Renders a tabindex attribute.
Title string Renders a title attribute.

Custom Styling

It is possible to apply custom styles to the button through its Class parameter. You may want to customize the styling based on the Selected state.

caption Set CSS class to the button and change its appearance

<TelerikToggleButton Class="my-toggle">
    Toggle Button
</TelerikToggleButton>

<style>
    /* default state */
    .my-toggle.k-button,
    .my-toggle.k-button:hover {
        border: 2px solid blue;
    }
    /* selected state */
    .my-toggle.k-selected,
    .my-toggle.k-selected:hover {
        color: yellow;
        font-weight: 700;
    }
</style>

Next Steps

  • [Handle Toggle Button Events]({%slug togglebutton-events%})
  • [Enhance the Toggle Button with Icons]({%slug togglebutton-icons%})

See Also