Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

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>Cascader</h3>

<DemoBlock Title="Cascade selection" Introduction="Drop-down selection boxes are available in a variety of colors" Name="Normal">
    <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" />
</DemoBlock>

<DemoBlock Title="Turn off cascading selection" Introduction="Cascading selection is not available" Name="Disabled">
    <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>
</DemoBlock>

<DemoBlock Title="Two-way binding" Introduction="The values in the text box change when you change the cascading selection option by binding the <code>Value</code> property with the <code>Select</code> component." Name="Bind">
    <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>
</DemoBlock>

<DemoBlock Title="Client validation" Introduction="When cascading selection is not selected, click the submit button to block." Name="ValidateForm">
    <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">Submit</Button>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="The binding generic is the Guid structure" Introduction="The component binding value is an example of a Guid structure" Name="Color">
    <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>
</DemoBlock>

<DemoBlock Title="The label is displayed" Introduction="When a component binds in both directions, it automatically determines whether label text is displayed based on the conditions" Name="Labels">
    <p>The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component of the <a href='inputs'>[portal]</a></p>
    <Divider Text="Bidirectional binding displays labels" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="@Model">
        <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" />
    </ValidateForm>
    <Divider Text="Bidirectional bindings do not display labels" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" />
    <Divider Text="Customize DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <Cascader Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address" DisplayText="Custom city" ShowLabel="true" />
</DemoBlock>

<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.Components;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples;

/// <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 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload