Bootstrap Blazor enterprise-level UI component library

Cascade selection

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

Demo

@using Color = BootstrapBlazor.Components.Color
@inject IStringLocalizer<CascaderNormal> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" OnSelectedItemChanged="@OnItemChanged" Items="@_items" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" OnSelectedItemChanged="@OnItemChanged" Color="Color.Primary" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" OnSelectedItemChanged="@OnItemChanged" Color="Color.Success" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" OnSelectedItemChanged="@OnItemChanged" Color="Color.Danger" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" OnSelectedItemChanged="@OnItemChanged" Color="Color.Warning" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" OnSelectedItemChanged="@OnItemChanged" Color="Color.Info" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" OnSelectedItemChanged="@OnItemChanged" Color="Color.Secondary" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" OnSelectedItemChanged="@OnItemChanged" Color="Color.Dark" />
    </div>
</div>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private List<CascaderItem> _items = new List<CascaderItem>();

    /// <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>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        _items = new List<CascaderItem>
        {
            new CascaderItem(Localizer["item1"], Localizer["item1"]),
            new CascaderItem(Localizer["item2"], Localizer["item2"]),
            new CascaderItem(Localizer["item3"], Localizer["item3"]),
        };

        _items[0].AddItem(new CascaderItem("item1_child1", Localizer["item1_child1"]));
        _items[0].AddItem(new CascaderItem("item1_child2", Localizer["item1_child2"]));
        _items[0].AddItem(new CascaderItem("item1_child3", Localizer["item1_child3"]));
        _items[0].AddItem(new CascaderItem("item1_child4", Localizer["item1_child4"]));

        _items[0].Items.ElementAt(0).AddItem(new CascaderItem("item1_child1_child", Localizer["item1_child1_child"]));

        _items[1].AddItem(new CascaderItem("item2_child1", Localizer["item2_child1"]));
        _items[1].AddItem(new CascaderItem("item2_child2", Localizer["item2_child2"]));
        _items[1].AddItem(new CascaderItem("item2_child3", Localizer["item2_child3"]));

        _items[2].AddItem(new CascaderItem("item3_child1", Localizer["item3_child1"]));
        _items[2].AddItem(new CascaderItem("item3_child2", Localizer["item3_child2"]));
    }
}

Turn off cascading selection

Cascading selection is not available

Demo

@inject IStringLocalizer<CascaderDisabled> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" IsDisabled="true" Color="Color.Primary" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" IsDisabled="true" Color="Color.Success" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" IsDisabled="true" Color="Color.Danger" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" IsDisabled="true" Color="Color.Warning" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" IsDisabled="true" Color="Color.Info" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" IsDisabled="true" Color="Color.Secondary" />
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@_items" IsDisabled="true" Color="Color.Dark" />
    </div>
</div>

@code {
    private List<CascaderItem> _items = new List<CascaderItem>();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        _items = new List<CascaderItem>
        {
            new CascaderItem(Localizer["item1"], Localizer["item1"]),
            new CascaderItem(Localizer["item2"], Localizer["item2"]),
            new CascaderItem(Localizer["item3"], Localizer["item3"]),
        };

        _items[0].AddItem(new CascaderItem("item1_child1", Localizer["item1_child1"]));
        _items[0].AddItem(new CascaderItem("item1_child2", Localizer["item1_child2"]));
        _items[0].AddItem(new CascaderItem("item1_child3", Localizer["item1_child3"]));
        _items[0].AddItem(new CascaderItem("item1_child4", Localizer["item1_child4"]));

        _items[0].Items.ElementAt(0).AddItem(new CascaderItem("item1_child1_child", Localizer["item1_child1_child"]));

        _items[1].AddItem(new CascaderItem("item2_child1", Localizer["item2_child1"]));
        _items[1].AddItem(new CascaderItem("item2_child2", Localizer["item2_child2"]));
        _items[1].AddItem(new CascaderItem("item2_child3", Localizer["item2_child3"]));

        _items[2].AddItem(new CascaderItem("item3_child1", Localizer["item3_child1"]));
        _items[2].AddItem(new CascaderItem("item3_child2", Localizer["item3_child2"]));
    }
}

Two-way binding

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

Demo

@inject IStringLocalizer<CascaderBind> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Cascader Color="Color.Primary" Items="@_items" @bind-Value="@Value" />
    </div>
    <div class="col-12 col-sm-6">
        <BootstrapInput readonly @bind-Value="@Value" />
    </div>
</div>

@code {
    private string Value { get; set; } = "Shanghai";

    private List<CascaderItem> _items = new List<CascaderItem>();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        Value = Localizer["item1"];

        _items = new List<CascaderItem>
        {
            new CascaderItem(Localizer["item1"], Localizer["item1"]),
            new CascaderItem(Localizer["item2"], Localizer["item2"]),
            new CascaderItem(Localizer["item3"], Localizer["item3"]),
        };

        _items[0].AddItem(new CascaderItem("item1_child1", Localizer["item1_child1"]));
        _items[0].AddItem(new CascaderItem("item1_child2", Localizer["item1_child2"]));
        _items[0].AddItem(new CascaderItem("item1_child3", Localizer["item1_child3"]));
        _items[0].AddItem(new CascaderItem("item1_child4", Localizer["item1_child4"]));

        _items[0].Items.ElementAt(0).AddItem(new CascaderItem("item1_child1_child", Localizer["item1_child1_child"]));

        _items[1].AddItem(new CascaderItem("item2_child1", Localizer["item2_child1"]));
        _items[1].AddItem(new CascaderItem("item2_child2", Localizer["item2_child2"]));
        _items[1].AddItem(new CascaderItem("item2_child3", Localizer["item2_child3"]));

        _items[2].AddItem(new CascaderItem("item3_child1", Localizer["item3_child1"]));
        _items[2].AddItem(new CascaderItem("item3_child2", Localizer["item3_child2"]));
    }
}

Client validation

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

Demo

@inject IStringLocalizer<CascaderValidateForm> Localizer

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

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    private Foo Model { get; set; } = new Foo();

    private List<CascaderItem> _items = new List<CascaderItem>();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        _items = new List<CascaderItem>
        {
            new CascaderItem(Localizer["item1"], Localizer["item1"]),
            new CascaderItem(Localizer["item2"], Localizer["item2"]),
            new CascaderItem(Localizer["item3"], Localizer["item3"]),
        };

        _items[0].AddItem(new CascaderItem("item1_child1", Localizer["item1_child1"]));
        _items[0].AddItem(new CascaderItem("item1_child2", Localizer["item1_child2"]));
        _items[0].AddItem(new CascaderItem("item1_child3", Localizer["item1_child3"]));
        _items[0].AddItem(new CascaderItem("item1_child4", Localizer["item1_child4"]));

        _items[0].Items.ElementAt(0).AddItem(new CascaderItem("item1_child1_child", Localizer["item1_child1_child"]));

        _items[1].AddItem(new CascaderItem("item2_child1", Localizer["item2_child1"]));
        _items[1].AddItem(new CascaderItem("item2_child2", Localizer["item2_child2"]));
        _items[1].AddItem(new CascaderItem("item2_child3", Localizer["item2_child3"]));

        _items[2].AddItem(new CascaderItem("item3_child1", Localizer["item3_child1"]));
        _items[2].AddItem(new CascaderItem("item3_child2", Localizer["item3_child2"]));
    }
}

The binding generic is the Guid structure

The component binding value is an example of a Guid structure

Demo

4fed1c0a-e967-484f-a6f0-f8a4050536a0

<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>

@code {
    private Guid CurrentGuid { get; set; }

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

Parent selectable

Whether can select on the parent node

Demo

@inject IStringLocalizer<CascaderParentSelectable> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Cascader Color="Color.Primary" Items="@_items" @bind-Value="@CurrentGuid" ParentSelectable="false" />
    </div>
</div>

@code {
    private Guid CurrentGuid { get; set; }

    private List<CascaderItem> _items = new List<CascaderItem>();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        _items = new List<CascaderItem>
        {
            new CascaderItem(Localizer["item1"], Localizer["item1"]),
            new CascaderItem(Localizer["item2"], Localizer["item2"]),
            new CascaderItem(Localizer["item3"], Localizer["item3"]),
        };

        _items[0].AddItem(new CascaderItem("item1_child1", Localizer["item1_child1"]));
        _items[0].AddItem(new CascaderItem("item1_child2", Localizer["item1_child2"]));
        _items[0].AddItem(new CascaderItem("item1_child3", Localizer["item1_child3"]));
        _items[0].AddItem(new CascaderItem("item1_child4", Localizer["item1_child4"]));

        _items[0].Items.ElementAt(0).AddItem(new CascaderItem("item1_child1_child", Localizer["item1_child1_child"]));

        _items[1].AddItem(new CascaderItem("item2_child1", Localizer["item2_child1"]));
        _items[1].AddItem(new CascaderItem("item2_child2", Localizer["item2_child2"]));
        _items[1].AddItem(new CascaderItem("item2_child3", Localizer["item2_child3"]));

        _items[2].AddItem(new CascaderItem("item3_child1", Localizer["item3_child1"]));
        _items[2].AddItem(new CascaderItem("item3_child2", Localizer["item3_child2"]));
    }
}

Show Full Levels

Whether show the full levels via ShowFullLevels

Demo

@inject IStringLocalizer<CascaderShowFullLevels> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Cascader Color="Color.Primary" Items="@_items" @bind-Value="@CurrentGuid" ShowFullLevels="false" />
    </div>
</div>

@code {
    private Guid CurrentGuid { get; set; }

    private List<CascaderItem> _items = new List<CascaderItem>();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        _items = new List<CascaderItem>
        {
            new CascaderItem(Localizer["item1"], Localizer["item1"]),
            new CascaderItem(Localizer["item2"], Localizer["item2"]),
            new CascaderItem(Localizer["item3"], Localizer["item3"]),
        };

        _items[0].AddItem(new CascaderItem("item1_child1", Localizer["item1_child1"]));
        _items[0].AddItem(new CascaderItem("item1_child2", Localizer["item1_child2"]));
        _items[0].AddItem(new CascaderItem("item1_child3", Localizer["item1_child3"]));
        _items[0].AddItem(new CascaderItem("item1_child4", Localizer["item1_child4"]));

        _items[0].Items.ElementAt(0).AddItem(new CascaderItem("item1_child1_child", Localizer["item1_child1_child"]));

        _items[1].AddItem(new CascaderItem("item2_child1", Localizer["item2_child1"]));
        _items[1].AddItem(new CascaderItem("item2_child2", Localizer["item2_child2"]));
        _items[1].AddItem(new CascaderItem("item2_child3", Localizer["item2_child3"]));

        _items[2].AddItem(new CascaderItem("item3_child1", Localizer["item3_child1"]));
        _items[2].AddItem(new CascaderItem("item3_child2", Localizer["item3_child2"]));
    }
}

The label is displayed

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

Custom city

@inject IStringLocalizer<CascaderLabels> Localizer

<Divider Text="@Localizer["Divider1"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
<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;" />
<Cascader Color="Color.Primary" Items="@_items" @bind-Value="@Model.Address" DisplayText="@Localizer["CascaderText"]" ShowLabel="true" />

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    private Foo Model { get; set; } = new Foo();

    private List<CascaderItem> _items = new List<CascaderItem>();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        _items = new List<CascaderItem>
        {
            new CascaderItem(Localizer["item1"], Localizer["item1"]),
            new CascaderItem(Localizer["item2"], Localizer["item2"]),
            new CascaderItem(Localizer["item3"], Localizer["item3"]),
        };

        _items[0].AddItem(new CascaderItem("item1_child1", Localizer["item1_child1"]));
        _items[0].AddItem(new CascaderItem("item1_child2", Localizer["item1_child2"]));
        _items[0].AddItem(new CascaderItem("item1_child3", Localizer["item1_child3"]));
        _items[0].AddItem(new CascaderItem("item1_child4", Localizer["item1_child4"]));

        _items[0].Items.ElementAt(0).AddItem(new CascaderItem("item1_child1_child", Localizer["item1_child1_child"]));

        _items[1].AddItem(new CascaderItem("item2_child1", Localizer["item2_child1"]));
        _items[1].AddItem(new CascaderItem("item2_child2", Localizer["item2_child2"]));
        _items[1].AddItem(new CascaderItem("item2_child3", Localizer["item2_child3"]));

        _items[2].AddItem(new CascaderItem("item3_child1", Localizer["item3_child1"]));
        _items[2].AddItem(new CascaderItem("item3_child2", Localizer["item3_child2"]));
    }
}

Cascader

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01