Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Cascader

Drop-down selection boxes are available in a variety of colors

Demo

Cascading selection is not available

Demo

The values in the text box change when you change the cascading selection option by binding the Value property with the Select component.

Demo

When cascading selection is not selected, click the submit button to block.

Demo

The component binding value is an example of a Guid structure

Demo
00000000-0000-0000-0000-000000000000

When a component binds in both directions, it automatically determines whether label text is displayed based on the conditions

Demo

The pre-label explicit rules are consistent with the BootstrapInput component of the [portal]

Bidirectional binding displays labels
Bidirectional bindings do not display labels
Customize DisplayText

Attributes

Loading...

Event

Loading...
@page "/cascaders"
@inject IStringLocalizer<Cascaders> Localizer

<h3>@Localizer["Title"]</h3>

<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Primary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Success" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Danger" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Warning" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Info" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Secondary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Dark" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Primary" Items="@Items" IsDisabled="true"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Success" Items="@Items" IsDisabled="true"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Danger" Items="@Items" IsDisabled="true"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Warning" Items="@Items" IsDisabled="true"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Info" Items="@Items" IsDisabled="true"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Secondary" Items="@Items" IsDisabled="true"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <Cascader TValue="string" Color="Color.Dark" Items="@Items" IsDisabled="true"></Cascader>
        </div>
    </div>
</Block>

<Block Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Value"></Cascader>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput readonly @bind-Value="@Value" />
        </div>
    </div>
</Block>

<Block Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]">
    <ValidateForm Model="@Model">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <Cascader Items="@Items" @bind-Value="@Model.Address"></Cascader>
            </div>
            <div class="col-12 col-sm-6">
                <Button ButtonType="ButtonType.Submit">@Localizer["ButtonText"]</Button>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Cascader Color="Color.Primary" Items="@GuidItems" @bind-Value="@CurrentGuid" />
        </div>
        <div class="col-12 col-sm-6">
            <div class="form-control">@CurrentGuid</div>
        </div>
    </div>
</Block>

<Block Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]">
    <p>@((MarkupString)Localizer["P1"].Value)</p>
    <Divider Text="@Localizer["Divider1"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="@Model">
        <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" />
    </ValidateForm>
    <Divider Text="@Localizer["Divider2"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" />
    <Divider Text="@Localizer["Divider3"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" DisplayText="@Localizer["CascaderText"]" ShowLabel="true" />
</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.Diagnostics.CodeAnalysis;
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();

        [NotNull]
        private BlockLogger? 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 IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = nameof(Cascader<string>.OnSelectedItemChanged),
                Description = Localizer["Event1"]!,
                Type ="Func<CascaderItem[], Task>"
            }
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ShowLabel",
                Description = Localizer["Att1"]!,
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = Localizer["Att2"]!,
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "PlaceHolder",
                Description = Localizer["Att3"]!,
                Type = "string",
                ValueList = " — ",
                DefaultValue = Localizer["Att3Default"]!
            },
            new AttributeItem() {
                Name = "Class",
                Description = Localizer["Att4"]!,
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Color",
                Description = Localizer["Att5"]!,
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = Localizer["Att6"]!,
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Items",
                Description = Localizer["Att7"]!,
                Type = "IEnumerable<CascaderItem>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload