Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Switch

The most common switching applications are available

Basic usage

Click the button to switch statuses

Demo

Click the first switch to output the log with value

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Switchs> Localizer

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

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

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

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

Disable the state

Control the unavailable state of the component by setting the IsDisabled property

Demo

Off

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Switchs> Localizer

<Switch OnColor="Color.Primary"
        IsDisabled="true"
        OnText="@Localizer["SwitchsOnText"]"
        OffText="@Localizer["SwitchsOffText"]" />

Switch color

Set the switch status color by setting the OnColor OffColor property values

Demo

Off

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Switchs> Localizer

<Switch OnColor="Color.Danger"
        OffColor="Color.Success"
        OnText="@Localizer["SwitchsOnText"]"
        OffText="@Localizer["SwitchsOffText"]" />

Two-way binding

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 DisplayText property, or through the ShowLabel property turns off the display of the prelabel

The pre-label explicit rules are consistent with the BootstrapInput component of the [The portal]

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

绑定标签

Off

Do not occupy seats

The value of DisplayText is not displayed when the ShowLabel is false

Off

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

<div class="row g-3">
    <div class="col-12">
        <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="@Localizer["SwitchsOnText"]" OffText="@Localizer["SwitchsOffText"]" @bind-Value="@Model.BindValue" DisplayText="@Localizer["SwitchsBindingDisplayText1"]"></Switch>
    </div>
    <div class="col-12">
        <div>@Localizer["SwitchsBindingDivText1"]: @Model.BindValue</div>
    </div>
    <Divider Text="@Localizer["SwitchsBindingDividerText1"]" />
    <div class="col-12">
        <p>@((MarkupString)Localizer["SwitchsBindingTips1"].Value)</p>
    </div>
    <div class="col-12">
        <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="@Localizer["SwitchsOnText"]" OffText="@Localizer["SwitchsOffText"]" @bind-Value="@Model.BindValue" DisplayText="@Localizer["SwitchsBindingDisplayText2"]" ShowLabel="true"></Switch>
    </div>
    <Divider Text="@Localizer["SwitchsBindingDividerText2"]" />
    <div class="col-12">
        <p>@((MarkupString)Localizer["SwitchsBindingTips2"].Value)</p>
    </div>
    <div class="col-12">
        <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="@Localizer["SwitchsOnText"]" OffText="@Localizer["SwitchsOffText"]" @bind-Value="@Model.BindValue" ShowLabel="true"></Switch>
    </div>
    <Divider Text="@Localizer["SwitchsBindingDividerText3"]" />
    <div class="col-12">
        <p>@((MarkupString)Localizer["SwitchsBindingTips3"].Value)</p>
    </div>
    <div class="col-12">
        <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="@Localizer["SwitchsOnText"]" OffText="@Localizer["SwitchsOffText"]" @bind-Value="@Model.BindValue" DisplayText="@Localizer["SwitchsBindingDisplayText3"]" ShowLabel="false"></Switch>
    </div>
</div>

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

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

Displays built-in text

By setting ShowInnerText property control component displays built-in text

Demo

By setting the onInnerText OffInnerText property to change the built-in text, a Chinese character is recommended by default to customize the component width to increase the amount of built-in text

Default text:

Custom text:

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Switchs> Localizer

<div class="row g-3">
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <label class="form-label">@Localizer["SwitchsInnerTextLabelText1"]</label>
        <Switch OnColor="Color.Primary"
                ShowInnerText="true" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <label class="form-label">@Localizer["SwitchsInnerTextLabelText2"]</label>
        <Switch OnColor="Color.Primary"
                ShowInnerText="true"
                OnInnerText="@Localizer["SwitchsInnerTextOnInnerText"]"
                OffInnerText="@Localizer["SwitchsInnerTextOffInnerText"]" />
    </div>
</div>

Can be an empty type switch

Control the default value of the Null value by setting the DefaultValueWhenNull property, which is false when not set

Demo

Off

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Switchs> Localizer

<div class="row g-3">
    <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
        <NullSwitch @bind-Value="@NullValue"
                    OnColor="Color.Dark"
                    OnText="@Localizer["SwitchsOnText"]"
                    OffText="@Localizer["SwitchsOffText"]" />
    </div>
</div>

@code {
    private bool? NullValue { get; set; }
}

Attributes

Event

B station related video link

交流群

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

Switch

The most common switching applications are available

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.5-beta01