Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Switch 开关

提供最普通的开关应用

基础用法

点击按钮切换状态

Demo

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

开启
开启
开启
开启
开启
开启

禁用状态

通过设置 IsDisabled 属性控制组件不可用状态

Demo
关闭

开关颜色

通过设置 OnColor OffColor 属性值,设置开关状态颜色

Demo
关闭

双向绑定

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

Demo

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

前置标签显式规则与 BootstrapInput 组件一致 [传送门]

关闭
绑定数值: False
自定义标签

设置 DisplayText 值为 自定义标签

关闭
占位

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

关闭
不占位

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

关闭

显示内置文字

通过设置 ShowInnerText 属性控制组件显示内置文字

Demo

通过设置 OnInnerText OffInnerText 属性更改内置文字,默认情况下建议使用一个汉字,可自定义组件宽度来增加内置文字数量

Attributes

Loading...

事件 Events

Loading...
@page "/switchs"

<h3>Switch 开关</h3>

<h4>提供最普通的开关应用</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">
                <Switch ValueChanged="@OnValueChanged" Value="@BindValue" OnColor="Color.Secondary" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Success" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Danger" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Warning" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Info" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Dark" OnText="开启" OffText="关闭"></Switch>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用状态" Introduction="通过设置 <code>IsDisabled</code> 属性控制组件不可用状态">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭"></Switch>
            </div>
        </div>
    </div>
</Block>

<Block Title="开关颜色" Introduction="通过设置 <code>OnColor</code> <code>OffColor</code> 属性值,设置开关状态颜色">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch OnColor="Color.Danger" OffColor="Color.Success" OnText="开启" OffText="关闭"></Switch>
            </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>
    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="双向绑定示例"></Switch>
            </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">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="自定义标签" ShowLabel="true"></Switch>
            </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">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" ShowLabel="true"></Switch>
            </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">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="不显示" ShowLabel="false"></Switch>
            </div>
        </div>
    </div>
</Block>

<Block Title="显示内置文字" Introduction="通过设置 <code>ShowInnerText</code> 属性控制组件显示内置文字">
    <p>通过设置 <code>OnInnerText</code> <code>OffInnerText</code> 属性更改内置文字,默认情况下建议使用一个汉字,可自定义组件宽度来增加内置文字数量</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <label class="control-label">默认文字:</label>
                <Switch OnColor="Color.Primary" ShowInnerText="true" />
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <label class="control-label">自定义文字:</label>
                <Switch OnColor="Color.Primary" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
            </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 Switchs
    {
        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($"Switch CurrentValue: {val}");
        }

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Class",
                Description = "样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Height",
                Description = "控件高度",
                Type = "int",
                ValueList = "—",
                DefaultValue = "20"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = "是否禁用",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "OffColor",
                Description = "关颜色设置",
                Type = "Color",
                ValueList = " Primary / Secondary / Success / Danger / Warning / Info / Dark ",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "OnColor",
                Description = "开颜色设置",
                Type = "Color",
                ValueList = " Primary / Secondary / Success / Danger / Warning / Info / Dark ",
                DefaultValue = "Color.Success"
            },
            new AttributeItem() {
                Name = "OnText",
                Description = "组件 On 时显示文本",
                Type = "string",
                ValueList = "—",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "OffText",
                Description = "组件 Off 时显示文本",
                Type = "string",
                ValueList = "—",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "OnInnerText",
                Description = "组件 On 时内置显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "开"
            },
            new AttributeItem() {
                Name = "OffInnerText",
                Description = "组件 Off 时内置显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "关"
            },
            new AttributeItem() {
                Name = "ShowInnerText",
                Description = "是否显示内置显示文本",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Width",
                Description = "组件宽度",
                Type = "int",
                ValueList = "—",
                DefaultValue = "40"
            },
            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 = " — "
            }
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "ValueChanged",
                Description="获取选择改变的值",
                Type ="EventCallback<bool>"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

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