Bootstrap Blazor Cascader 级联选择组件

原文链接:https://www.cnblogs.com/ysmc/p/16157827.html

Cascader 级联选择

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

示例

razor

 1 <div class="row g-3">
 2     <div class="col-12 col-sm-6">
 3         <Cascader TValue="string" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
 4     </div>
 5     <div class="col-12 col-sm-6">
 6         <Cascader TValue="string" Color="Color.Primary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
 7     </div>
 8     <div class="col-12 col-sm-6">
 9         <Cascader TValue="string" Color="Color.Success" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
10     </div>
11     <div class="col-12 col-sm-6">
12         <Cascader TValue="string" Color="Color.Danger" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
13     </div>
14     <div class="col-12 col-sm-6">
15         <Cascader TValue="string" Color="Color.Warning" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
16     </div>
17     <div class="col-12 col-sm-6">
18         <Cascader TValue="string" Color="Color.Info" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
19     </div>
20     <div class="col-12 col-sm-6">
21         <Cascader TValue="string" Color="Color.Secondary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
22     </div>
23     <div class="col-12 col-sm-6">
24         <Cascader TValue="string" Color="Color.Dark" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
25     </div>
26 </div>
27 <BlockLogger @ref="Trace" class="mt-3" />

cs

 1 private static IEnumerable<CascaderItem> GetItems()
 2 {
 3      var ret = new List<CascaderItem>
 4      {
 5           new CascaderItem("Beijing", "北京"),
 6           new CascaderItem("Shanghai", "上海"),
 7           new CascaderItem("GuangZhou", "广州"),
 8      };
 9 
10      ret[0].AddItem(new CascaderItem("DC", "东城区"));
11      ret[0].AddItem(new CascaderItem("XC", "西城区"));
12      ret[0].AddItem(new CascaderItem("CY", "朝阳区"));
13      ret[0].AddItem(new CascaderItem("CW", "崇文区"));
14 
15      ret[0].Items.ElementAt(0).AddItem(new CascaderItem("X", "某某街道"));
16 
17      ret[1].AddItem(new CascaderItem("HP", "黄浦区"));
18      ret[1].AddItem(new CascaderItem("XH", "徐汇区"));
19 
20      return ret;
21 }
22 
23 /// <summary>
24 /// 获得 默认数据集合
25 /// </summary>
26 private readonly IEnumerable<CascaderItem> Items = GetItems();
27 
28 
29 /// <summary>
30 /// 下拉选项改变时调用此方法
31 /// </summary>
32 /// <param name="items"></param>
33 private Task OnItemChanged(CascaderItem[] items)
34 {
35     return Task.CompletedTask;
36 }

 

Attributes 属性

 
参数
说明
类型
可选值
默认值
ShowLabel
是否显示前置标签
bool
true|false
true
DisplayText
前置标签显示文本
string
PlaceHolder
未选择时的占位显示文字
string
点击进行选择 ...
Class
样式
string
Color
颜色
Color
Primary / Secondary / Success / Danger / Warning / Info / Dark
Primary
IsDisabled
是否禁用
boolean
true / false
false
Items
数据集合
IEnumerable<CascaderItem>

事件 Event

 
参数
说明
类型
OnSelectedItemChanged
级联选择选项改变时触发此事件
Func<CascaderItem[], Task>
 
 

写在最后

  希望大佬们看到这篇文章,能给项目点个star支持下,感谢各位!

star流程:

1、访问点击项目链接:BootstrapBlazor   star

2、点击star,如下图,即可完成star,关注项目不迷路:

 

另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:

  BootstrapAdmin 项目地址:star
  https://gitee.com/LongbowEnterprise/BootstrapAdmin

  SliderCaptcha 项目地址:star
  https://gitee.com/LongbowEnterprise/SliderCaptcha

 

交流群(QQ)欢迎加群讨论

       BA & Blazor ①(795206915)          BA & Blazor ②(675147445)

posted @ 2022-04-17 23:08  一事冇诚  阅读(2079)  评论(2编辑  收藏  举报