
Toggle 开关
提供最普通的开关应用,值为 true
false
基础用法
点击按钮切换状态
Demo
点击第一个开关有值输出日志
禁用状态
开关不可用状态。
Demo
双向绑定数据
绑定组件内变量,数据自动同步
Demo
Switch
组件开启双向绑定时,会根据绑定的 Model
属性值去自动获取 DisplayName
标签值并且显示为前置 Label
,通过 DisplayText
属性可以自定义显示前置标签,或者通过 ShowLabel
属性关闭前置标签是否显示
绑定数值: False
自定义标签
设置 DisplayText
值为 自定义标签
占位
无论是否设置 DisplayText
值,当 ShowLabel
为 true
时均显示
不占位
无论是否设置 DisplayText
值,当 ShowLabel
为 false
时均不显示
Attributes
Loading...
事件 Events
Loading...
@page "/toggles"
<h3>Toggle 开关</h3>
<h4>提供最普通的开关应用,值为 <code>true</code> <code>false</code></h4>
<Block Title="基础用法" Introduction="点击按钮切换状态">
<p>点击第一个开关有值输出日志</p>
<div class="form-inline">
<div class="row">
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="@BindValue" ValueChanged="@OnValueChanged" OnText="开启" OffText="关闭" Color="Color.Primary"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Secondary"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Danger"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Warning"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Info"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Dark"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle Value="false" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
</div>
</div>
</div>
<Logger @ref="Trace" class="mt-3" />
</Block>
<Block Title="禁用状态" Introduction="开关不可用状态。">
<div class="form-inline">
<div class="row">
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Primary"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Secondary"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Danger"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Warning"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Info"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Dark"></Toggle>
</div>
<div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
<Toggle IsDisabled="true" Value="false" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
</div>
</div>
</div>
</Block>
<Block Title="双向绑定数据" Introduction="绑定组件内变量,数据自动同步">
<p><code>Switch</code> 组件开启双向绑定时,会根据绑定的 <code>Model</code> 属性值去自动获取 <code>DisplayName</code> 标签值并且显示为前置 <code>Label</code>,通过 <code>DisplayText</code> 属性可以自定义显示前置标签,或者通过 <code>ShowLabel</code> 属性关闭前置标签是否显示</p>
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="双向绑定示例"></Toggle>
</div>
<div class="form-group col-12">
<div>绑定数值: @Model.BindValue</div>
</div>
<Divider Text="自定义标签" />
<div class="form-group col-12">
<p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
</div>
<div class="form-group col-12">
<Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="自定义标签" ShowLabel="true"></Toggle>
</div>
<Divider Text="占位" />
<div class="form-group col-12">
<p>无论是否设置 <code>DisplayText</code> 值,当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
</div>
<div class="form-group col-12">
<Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" ShowLabel="true"></Toggle>
</div>
<Divider Text="不占位" />
<div class="form-group col-12">
<p>无论是否设置 <code>DisplayText</code> 值,当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
</div>
<div class="form-group col-12">
<Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="不显示" ShowLabel="false"></Toggle>
</div>
</div>
</div>
</Block>
<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 BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.ComponentModel;
namespace BootstrapBlazor.Shared.Pages
{
/// <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 Logger? 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="获取选择改变的值",
Type ="EventCallback<bool>"
}
};
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Color",
Description = "颜色",
Type = "Color",
ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
DefaultValue = "Success"
},
new AttributeItem() {
Name = "IsDisabled",
Description = "是否禁用",
Type = "boolean",
ValueList = "true / false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "OffText",
Description = "组件 Off 时显示文本",
Type = "string",
ValueList = "—",
DefaultValue = "收缩"
},
new AttributeItem() {
Name = "OnText",
Description = "组件 On 时显示文本",
Type = "string",
ValueList = "—",
DefaultValue = "展开"
},
new AttributeItem() {
Name = "Width",
Description = "组件宽度",
Type = "int",
ValueList = " — ",
DefaultValue = "120"
},
new AttributeItem() {
Name = "Value",
Description = "获取值",
Type = "boolean",
ValueList = " ",
DefaultValue = "None"
},
new AttributeItem() {
Name = "ShowLabel",
Description = "是否显示前置标签",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = "DisplayText",
Description = "前置标签显示文本",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "OnValueChanged",
Description = "值发生改变时回调委托方法",
Type = "Func<bool, Task>",
ValueList = " — ",
DefaultValue = " — "
}
};
}
}