Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Toggle 开关

提供最普通的开关应用,值为 true false

基础用法

点击按钮切换状态

Demo

点击第一个开关有值输出日志

禁用状态

开关不可用状态。

Demo

双向绑定数据

绑定组件内变量,数据自动同步

Demo

Switch 组件开启双向绑定时,会根据绑定的 Model 属性值去自动获取 DisplayName 标签值并且显示为前置 Label,通过 DisplayText 属性可以自定义显示前置标签,或者通过 ShowLabel 属性关闭前置标签是否显示

绑定数值: False
自定义标签

设置 DisplayText 值为 自定义标签

占位

无论是否设置 DisplayText 值,当 ShowLabeltrue 时均显示

不占位

无论是否设置 DisplayText 值,当 ShowLabelfalse 时均不显示

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 = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload