Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Checkbox 多选框

一组备选项中进行多选

基础用法

单独使用可以表示两种状态之间的切换,列头或者表头使用时可以表示三种状态之间的切换。组件支持泛型数据绑定,通过 TValue 设置绑定数据类型,通过 State 设置组件状态

Demo

禁用复选框

复选框不可用状态,通过 IsDisabled 设置组件是否可用

Demo

Label 文字

复选框显示文字,通过 DisplayText 设置组件显示文本,点击显示文字时组件状态也会进行翻转

Demo

设置DisplayText 属性,或者通过双向绑定均可以显示文本信息

双向绑定 boolean 数据

绑定组件内变量,数据自动同步,绑定数据类型为 boolean 类型时自动翻转值

Demo

双向绑定 string 数据

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

Demo

表单中使用

在表单中使用 Checkbox 时,显示标签文字会放置到组件前面

Demo

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

Attributes

Loading...

事件 Events

Loading...
@page "/checkboxs"

<h3>Checkbox 多选框</h3>

<h4>一组备选项中进行多选</h4>

<Block Title="基础用法" Introduction="单独使用可以表示两种状态之间的切换,列头或者表头使用时可以表示三种状态之间的切换。组件支持泛型数据绑定,通过 <code>TValue</code> 设置绑定数据类型,通过 <code>State</code> 设置组件状态">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Checkbox TValue="string" State="CheckboxState.Checked" OnStateChanged="@OnStateChanged" DisplayText="选中" ShowLabel="true"></Checkbox>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Checkbox TValue="string" State="CheckboxState.UnChecked" OnStateChanged="@OnStateChanged" DisplayText="未选" ShowLabel="true"></Checkbox>
            </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-12 col-md-4">
                <Checkbox TValue="string" State="CheckboxState.Checked" IsDisabled="true" DisplayText="选中" ShowLabel="true"></Checkbox>
            </div>
            <div class="form-group col-12 col-md-4">
                <Checkbox TValue="string" State="CheckboxState.UnChecked" IsDisabled="true" DisplayText="未选" ShowLabel="true"></Checkbox>
            </div>
        </div>
    </div>
</Block>

<Block Title="Label 文字" Introduction="复选框显示文字,通过 <code>DisplayText</code> 设置组件显示文本,点击显示文字时组件状态也会进行翻转">
    <p>设置<code>DisplayText</code> 属性,或者通过双向绑定均可以显示文本信息</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Checkbox TValue="string" DisplayText="显示文字" ShowAfterLabel="true"></Checkbox>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定 boolean 数据" Introduction="绑定组件内变量,数据自动同步,绑定数据类型为 <code>boolean</code> 类型时自动翻转值">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Checkbox DisplayText="双向绑定" ShowLabel="true" @bind-Value="@BindValue" OnStateChanged="@OnItemChanged"></Checkbox>
            </div>
            <div class="form-group col-12">
                <BootstrapInput @bind-Value="@BindValue" IsDisabled="true"></BootstrapInput>
            </div>
        </div>
    </div>
    <Logger @ref="BinderLog" class="mt-3" />
</Block>

<Block Title="双向绑定 string 数据" Introduction="绑定组件内变量,数据自动同步">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Checkbox DisplayText="双向绑定" ShowLabel="true" @bind-Value="@BindString" OnStateChanged="@OnItemChangedString"></Checkbox>
            </div>
            <div class="form-group col-12">
                <BootstrapInput @bind-Value="@BindString"></BootstrapInput>
            </div>
        </div>
    </div>
    <Logger @ref="BinderLog" class="mt-3" />
</Block>

<Block Title="表单中使用" Introduction="在表单中使用 <code>Checkbox</code> 时,显示标签文字会放置到组件前面">
    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
    <ValidateForm class="form-inline" Model="@Model">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Checkbox @bind-Value="@Model.BindValue" ShowLabel="true"></Checkbox>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Checkbox @bind-Value="@Model.BindValue" ShowLabel="true" DisplayText="手写标签"></Checkbox>
            </div>
        </div>
    </ValidateForm>
</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.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.ComponentModel;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Checkboxs
    {
        private class Foo
        {
            [DisplayName("标签文字")]
            public bool BindValue { get; set; }
        }

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

        /// <summary>
        /// 
        /// </summary>
        private Logger? Trace { get; set; }

        /// <summary>
        /// 
        /// </summary>
        private Logger? BinderLog { get; set; }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="state"></param>
        /// <param name="value"></param>
        private Task OnStateChanged(CheckboxState state, string value)
        {
            Trace?.Log($"Checkbox state changed State: {state}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="state"></param>
        /// <param name="value"></param>
        private Task OnItemChanged(CheckboxState state, bool value)
        {
            BinderLog?.Log($"CheckboxState: {state} - Bind Value: {value}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="state"></param>
        /// <param name="value"></param>
        private Task OnItemChangedString(CheckboxState state, string value)
        {
            BinderLog?.Log($"CheckboxState: {state} - Bind Value: {value}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 
        /// </summary>
        private string BindString { get; set; } = "我爱 Blazor";

        /// <summary>
        /// 
        /// </summary>
        private bool BindValue { get; set; }

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem() {
                    Name = "ShowLabel",
                    Description = "是否显示前置标签",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "ShowAfterLabel",
                    Description = "是否显示后置标签",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "DisplayText",
                    Description = "前置标签显示文本",
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem(){
                    Name = "IsDisabled",
                    Description = "是否禁用",
                    Type = "boolean",
                    ValueList = "true / false",
                    DefaultValue = "false"
                },
                new AttributeItem()
                {
                    Name = "State",
                    Description = "控件类型",
                    Type = "CheckboxState",
                    ValueList = "Mixed / Checked / UnChecked",
                    DefaultValue = "UnChecked"
                },
            };
        }

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnStateChanged",
                Description="选择框状态改变时回调此方法",
                Type ="Action<CheckboxState, TItem>"
            },
            new EventItem()
            {
                Name = "StateChanged",
                Description="State 状态改变回调方法",
                Type ="EventCallback<CheckboxState>"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

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