Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Cascader 级联选择

Cascader 级联选择

提供各种颜色的下拉选择框

Demo

Cascader 禁用级联选择

级联选择不可用状态

Demo

Cascader 双向绑定

通过 Select 组件绑定 Value 属性,改变级联选择选项时,文本框内的数值随之改变。

Demo

Select 客户端验证

级联选择未选择时,点击提交按钮时拦截。

Demo

绑定泛型为 Guid 结构

组件绑定值为 Guid 结构体示例

Demo
00000000-0000-0000-0000-000000000000

显示标签

组件双向绑定时会根据条件自动判断是否显示标签文字

Demo

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

双向绑定显示标签
双向绑定不显示标签
自定义 DisplayText

Attributes

Loading...

事件 Events

Loading...
@page "/cascaders"
<h3>Cascader 级联选择</h3>

<Block Title="Cascader 级联选择" Introduction="提供各种颜色的下拉选择框">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Primary" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Success" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Danger" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Warning" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Info" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Secondary" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Dark" Items="@Items" OnValueChanged="@OnItemChanged"></Cascader>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="Cascader 禁用级联选择" Introduction="级联选择不可用状态">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Primary" Items="@Items" IsDisabled="true"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Success" Items="@Items" IsDisabled="true"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Danger" Items="@Items" IsDisabled="true"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Warning" Items="@Items" IsDisabled="true"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Info" Items="@Items" IsDisabled="true"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Secondary" Items="@Items" IsDisabled="true"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Cascader TValue="string" Color="Color.Dark" Items="@Items" IsDisabled="true"></Cascader>
            </div>
        </div>
    </div>
</Block>

<Block Title="Cascader 双向绑定" Introduction="通过 <code>Select</code> 组件绑定 <code>Value</code> 属性,改变级联选择选项时,文本框内的数值随之改变。">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Value"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput readonly @bind-Value="@Value" />
            </div>
        </div>
    </div>
</Block>

<Block Title="Select 客户端验证" Introduction="级联选择未选择时,点击提交按钮时拦截。">
    <ValidateForm class="form-inline" Model="@Model">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Cascader Items="@Items" @bind-Value="@Model.Address"></Cascader>
            </div>
            <div class="form-group col-12 col-sm-6 align-items-end">
                <Button ButtonType="ButtonType.Submit">提交</Button>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="绑定泛型为 Guid 结构" Introduction="组件绑定值为 Guid 结构体示例">
    <div class="row">
        <div class="form-group col-12 col-sm-3">
            <Cascader Color="Color.Primary" Items="@GuidItems" @bind-Value="@CurrentGuid" />
        </div>
        <div class="form-group col-12 col-sm-9">
            <div class="form-control">@CurrentGuid</div>
        </div>
    </div>
</Block>

<Block Title="显示标签" Introduction="组件双向绑定时会根据条件自动判断是否显示标签文字">
    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
    <Divider Text="双向绑定显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm class="form-inline" Model="@Model">
        <div class="row">
            <div class="form-group col-12">
                <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" />
            </div>
        </div>
    </ValidateForm>
    <Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" />
            </div>
        </div>
    </div>
    <Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" DisplayText="自定义城市" ShowLabel="true" />
            </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.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Cascaders
    {
        private string Value { get; set; } = "Shanghai";

        /// <summary>
        ///
        /// </summary>
        private Foo Model { get; set; } = new Foo();

        /// <summary>
        /// 获得/设置 Logger 实例
        /// </summary>
        private Logger? Trace { get; set; }

        private static IEnumerable<CascaderItem> GetItems()
        {
            var ret = new List<CascaderItem>
            {
                new CascaderItem("Beijing", "北京"),
                new CascaderItem("Shanghai", "上海"),
                new CascaderItem("GuangZhou", "广州"),
            };

            ret[0].AddItem(new CascaderItem("DC", "东城区"));
            ret[0].AddItem(new CascaderItem("XC", "西城区"));
            ret[0].AddItem(new CascaderItem("CY", "朝阳区"));
            ret[0].AddItem(new CascaderItem("CW", "崇文区"));

            ret[0].Items.ElementAt(0).AddItem(new CascaderItem("X", "某某街道"));

            ret[1].AddItem(new CascaderItem("HP", "黄浦区"));
            ret[1].AddItem(new CascaderItem("XH", "徐汇区"));

            return ret;
        }

        /// <summary>
        /// 获得 默认数据集合
        /// </summary>
        private readonly IEnumerable<CascaderItem> Items = GetItems();


        private Guid CurrentGuid { get; set; }

        private readonly IEnumerable<CascaderItem> GuidItems = new CascaderItem[]
        {
            new CascaderItem(Guid.NewGuid().ToString(), "Guid1"),
            new CascaderItem(Guid.NewGuid().ToString(), "Guid2")
        };


        /// <summary>
        /// 下拉选项改变时调用此方法
        /// </summary>
        /// <param name="items"></param>
        private Task OnItemChanged(CascaderItem[] items)
        {
            Trace?.Log($"SelectedItem Text: {items[^1].Text} Value: {items[^1].Value} Selected");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnValueChanged",
                Description="级联选择选项改变时触发此事件",
                Type ="Func<CascaderItem[], Task>"
            }
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ShowLabel",
                Description = "是否显示前置标签",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = "前置标签显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "PlaceHolder",
                Description = "未选择时的占位显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "点击进行选择 ..."
            },
            new AttributeItem() {
                Name = "Class",
                Description = "样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Color",
                Description = "颜色",
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = "是否禁用",
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Items",
                Description = "数据集合",
                Type = "IEnumerable<CascaderItem>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload