Bootstrap Blazor Cascader 级联选择组件
原文链接:
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 IEnumerableGetItems() 2 { 3 var ret = new List 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 /// 24 /// 获得 默认数据集合 25 /// 26 private readonly IEnumerable Items = GetItems(); 27 28 29 /// 30 /// 下拉选项改变时调用此方法 31 /// 32 /// 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 |
— | — |
事件 Event
| 参数 | 说明 | 类型 |
|---|---|---|
| OnSelectedItemChanged | 级联选择选项改变时触发此事件 |
Func |
写在最后
希望大佬们看到这篇文章,能给项目点个star支持下,感谢各位!
star流程:
1、访问点击项目链接:BootstrapBlazor
2、点击star,如下图,即可完成star,关注项目不迷路:
另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:
BootstrapAdmin 项目地址:
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 项目地址:
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群(QQ)欢迎加群讨论
BA & Blazor ①(795206915) BA & Blazor ②(675147445)