Bootstrap Blazor Cascader 級(jí)聯(lián)選擇組件

原文鏈接：http://www.rzrgm.cn/ysmc/p/16157827.html

Cascader 級(jí)聯(lián)選擇

提供各種顏色的下拉選擇框

示例

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", "東城區(qū)"));
11      ret[0].AddItem(new CascaderItem("XC", "西城區(qū)"));
12      ret[0].AddItem(new CascaderItem("CY", "朝陽區(qū)"));
13      ret[0].AddItem(new CascaderItem("CW", "崇文區(qū)"));
14 
15      ret[0].Items.ElementAt(0).AddItem(new CascaderItem("X", "某某街道"));
16 
17      ret[1].AddItem(new CascaderItem("HP", "黃浦區(qū)"));
18      ret[1].AddItem(new CascaderItem("XH", "徐匯區(qū)"));
19 
20      return ret;
21 }
22 
23 /// <summary>
24 /// 獲得 默認(rèn)數(shù)據(jù)集合
25 /// </summary>
26 private readonly IEnumerable<CascaderItem> Items = GetItems();
27 
28 
29 /// <summary>
30 /// 下拉選項(xiàng)改變時(shí)調(diào)用此方法
31 /// </summary>
32 /// <param name="items"></param>
33 private Task OnItemChanged(CascaderItem[] items)
34 {
35     return Task.CompletedTask;
36 }

Attributes 屬性

參數(shù)	說明	類型	可選值	默認(rèn)值
ShowLabel	是否顯示前置標(biāo)簽	bool	true\|false	true
DisplayText	前置標(biāo)簽顯示文本	string	—	—
PlaceHolder	未選擇時(shí)的占位顯示文字	string	—	點(diǎn)擊進(jìn)行選擇 ...
Class	樣式	string	—	—
Color	顏色	Color	Primary / Secondary / Success / Danger / Warning / Info / Dark	Primary
IsDisabled	是否禁用	boolean	true / false	false
Items	數(shù)據(jù)集合	IEnumerable<CascaderItem>	—	—