Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Toggle

The most common switching application is available with a value of `true` `false`

Basic usage

Click the button to switch statuses

Demo

Click the first switch to output the log with value

Off

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Toggles> Localizer

<div class="row g-3">
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle Value="@BindValue" ValueChanged="@OnValueChanged" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Primary" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Secondary" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Success" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Danger" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Warning" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Info" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Dark" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle Value="false" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Success" />
    </div>
</div>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    private bool BindValue { get; set; } = true;

    private BlockLogger? Trace { get; set; }

    private void OnValueChanged(bool val)
    {
        BindValue = val;
        Trace?.Log($"Toggle CurrentValue: {val}");
    }
}

Disable the state

The switch is not available.

Demo

Off

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Toggles> Localizer

<div class="row g-3">
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle IsDisabled="true" Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Primary" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle IsDisabled="true" Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Secondary" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle IsDisabled="true" Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Success" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle IsDisabled="true" Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Danger" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle IsDisabled="true" Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Warning" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle IsDisabled="true" Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Info" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle IsDisabled="true" Value="true" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Dark" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <Toggle IsDisabled="true" Value="false" OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" Color="Color.Success" />
    </div>
</div>

Bind data in both directions

Binding variables within a component, data is automatically synchronized

Demo

when the Switch component turns on bidirectional binding, the DisplayName label value is automatically obtained based on the bound Model property value and appears as a pre-Label, which can be customized to display the pre-label through the DispalyText property, or through the ShowLabel property turns off the display of the prelabel

Off

The binding value: False

Custom labels

Set the DisplayText value to custom label

Custom labels

Off

Occupants

The value of DisplayText is displayed when ShowLabel is true, regardless of whether the value is set


    绑定标签On
            Off
            
    Not Occupants
    The value of DisplayText is not displayed when the ShowLabel is false
    On
            Off

@using BootstrapBlazor.Shared.Samples
@using System.ComponentModel
@inject IStringLocalizer<Toggles> Localizer

<div class="row g-3">
    <div class="col-12">
        <Toggle OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" @bind-Value="@Model.BindValue" DisplayText="@Localizer["BindToWayDiaspalyText1"]" />
    </div>
    <div class="col-12">
        <div>@Localizer["BindToWayDiv"] @Model.BindValue</div>
    </div>
    <Divider Text="@Localizer["CustomLabelText"]" />
    <div class="col-12">
        <p>@((MarkupString)Localizer["BindToWayP2"].Value)</p>
    </div>
    <div class="col-12">
        <Toggle OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" @bind-Value="@Model.BindValue" DisplayText="@Localizer["CustomLabelText"]" ShowLabel="true" />
    </div>
    <Divider Text="@Localizer["OccupantsText"]" />
    <div class="col-12">
        <p>@((MarkupString)Localizer["BindToWayP3"].Value)</p>
    </div>
    <div class="col-12">
        <Toggle OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" @bind-Value="@Model.BindValue" ShowLabel="true" />
    </div>
    <Divider Text="@Localizer["NotOccupantsText"]" />
    <div class="col-12">
        <p>@((MarkupString)Localizer["BindToWayP4"].Value)</p>
    </div>
    <div class="col-12">
        <Toggle OnText="@Localizer["TogglesOnText"]" OffText="@Localizer["TogglesOffText"]" @bind-Value="@Model.BindValue" DisplayText="@Localizer["NotDisplayText"]" ShowLabel="false" />
    </div>
</div>

@code {
    private class Foo
    {
        [DisplayName("绑定标签")]
        public bool BindValue { get; set; }
    }

    private Foo Model { get; set; } = new Foo();
}



Attributes

    
            
            
            
            Loading...

Event

    
            
            Loading...



B station related video link
No

交流群

QQ Group：BootstrapAdmin & Blazor
    795206915
    675147445
    Welcome to join the group discussion

Toggle

The most common switching application is available with a value of true false

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01

The most common switching application is available with a value of `true` `false`