Enterprise-level component library based on Bootstrap and BlazorToggle
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
On
Off
On
Off
On
Off
On
Off
On
Off
On
Off
On
Off
On
Off
Disable the state
The switch is not available.
Demo
On
Off
On
Off
On
Off
On
Off
On
Off
On
Off
On
Off
On
Off
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
On
Off
The binding value: False
Custom labels
Set the DisplayText value to custom label
On
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
Attributes
Loading...
Event
Loading...
@page "/toggles"
@inject IStringLocalizer<Toggles> Localizer
<h3>Toggle</h3>
<h4>The most common switching application is available with a value of <code>true</code> <code>false</code></h4>
<DemoBlock Title="Basic usage" Introduction="Click the button to switch statuses" Name="Normal">
<p>Click the first switch to output the log with value</p>
<div class="row g-3">
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="@BindValue" ValueChanged="@OnValueChanged" OnText="On" OffText="Off" Color="Color.Primary" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="On" OffText="Off" Color="Color.Secondary" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="On" OffText="Off" Color="Color.Success" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="On" OffText="Off" Color="Color.Danger" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="On" OffText="Off" Color="Color.Warning" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="On" OffText="Off" Color="Color.Info" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="On" OffText="Off" Color="Color.Dark" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="false" OnText="On" OffText="Off" Color="Color.Success" />
</div>
</div>
<BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>
<DemoBlock Title="Disable the state" Introduction="The switch is not available." Name="Disable">
<div class="row g-3">
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Primary" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Secondary" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Success" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Danger" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Warning" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Info" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Dark" />
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="false" OnText="On" OffText="Off" Color="Color.Success" />
</div>
</div>
</DemoBlock>
<DemoBlock Title="Bind data in both directions" Introduction="Binding variables within a component, data is automatically synchronized" Name="BindToWay">
<p>when the <code>Switch</code> component turns on bidirectional binding, the <code>DisplayName</code> label value is automatically obtained based on the bound <code>Model</code> property value and appears as a <code>pre-Label</code>, which can be customized to display the pre-label through the <code>DispalyText</code> property, or through the <code>ShowLabel</code> property turns off the display of the prelabel</p>
<div class="row g-3">
<div class="col-12">
<Toggle OnText="On" OffText="Off" @bind-Value="@Model.BindValue" DisplayText="An example of a two-way binding" />
</div>
<div class="col-12">
<div>The binding value: @Model.BindValue</div>
</div>
<Divider Text="Custom labels" />
<div class="col-12">
<p>Set the <code>DisplayText</code> value to <b>custom label </b></p>
</div>
<div class="col-12">
<Toggle OnText="On" OffText="Off" @bind-Value="@Model.BindValue" DisplayText="Custom labels" ShowLabel="true" />
</div>
<Divider Text="Occupants" />
<div class="col-12">
<p>The</code> value of <code>DisplayText is displayed when <code>ShowLabel</code> is <code>true</code>, regardless of whether the value is set</p>
</div>
<div class="col-12">
<Toggle OnText="On" OffText="Off" @bind-Value="@Model.BindValue" ShowLabel="true" />
</div>
<Divider Text="Not Occupants" />
<div class="col-12">
<p>The value of <code>DisplayText</code> is not displayed when the <code>ShowLabel</code> is <code>false</code></p>
</div>
<div class="col-12">
<Toggle OnText="On" OffText="Off" @bind-Value="@Model.BindValue" DisplayText="Do not display" ShowLabel="false" />
</div>
</div>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
<EventTable Items="@GetEvents()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using System.ComponentModel;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Toggles
{
private class Foo
{
/// <summary>
///
/// </summary>
[DisplayName("绑定标签")]
public bool BindValue { get; set; }
}
private Foo Model { get; set; } = new Foo();
/// <summary>
///
/// </summary>
private bool BindValue { get; set; } = true;
/// <summary>
///
/// </summary>
private BlockLogger? Trace { get; set; }
/// <summary>
///
/// </summary>
/// <param name="val"></param>
private void OnValueChanged(bool val)
{
BindValue = val;
Trace?.Log($"Toggle CurrentValue: {val}");
}
/// <summary>
/// 获得事件方法
/// </summary>
/// <returns></returns>
private IEnumerable<EventItem> GetEvents() => new EventItem[]
{
new EventItem()
{
Name = "ValueChanged",
Description = Localizer["ValueChanged"],
Type = "EventCallback<bool>"
}
};
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Color",
Description = Localizer["Color"],
Type = "Color",
ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
DefaultValue = "Success"
},
new AttributeItem() {
Name = "IsDisabled",
Description = Localizer["IsDisabled"],
Type = "boolean",
ValueList = "true / false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "OffText",
Description = Localizer["OffTextAttr"],
Type = "string",
ValueList = "—",
DefaultValue = Localizer["OffTextDefautValue"]!
},
new AttributeItem() {
Name = "OnText",
Description = Localizer["OnTextAttr"],
Type = "string",
ValueList = "—",
DefaultValue = Localizer["OnTextDefautValue"]!
},
new AttributeItem() {
Name = "Width",
Description = Localizer["Width"],
Type = "int",
ValueList = " — ",
DefaultValue = "120"
},
new AttributeItem() {
Name = "Value",
Description = Localizer["Value"],
Type = "boolean",
ValueList = " ",
DefaultValue = "None"
},
new AttributeItem() {
Name = "ShowLabel",
Description = Localizer["ShowLabel"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = "DisplayText",
Description = Localizer["DisplayText"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "OnValueChanged",
Description = Localizer["OnValueChanged"],
Type = "Func<bool, Task>",
ValueList = " — ",
DefaultValue = " — "
}
};
}
