Bootstrap Blazor Cascader 级联选择组件
2022-04-17 23:08
706 查看
原文链接:https://www.cnblogs.com/ysmc/p/16157827.html
Cascader 级联选择
提供各种颜色的下拉选择框
示例
razor
<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" />
cs
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(); /// <summary> /// 下拉选项改变时调用此方法 /// </summary> /// <param name="items"></param> private Task OnItemChanged(CascaderItem[] items) { return Task.CompletedTask; }
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
2、点击star,如下图,即可完成star,关注项目不迷路:
另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:
BootstrapAdmin 项目地址:
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 项目地址:
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群(QQ)欢迎加群讨论
BA & Blazor ①(795206915) BA & Blazor ②(675147445)
相关文章推荐
- el-cascader级联组件动态加载数据允许选择任意一级的选项
- JS组件系列之Bootstrap Icon图标选择组件
- 组件--Cascader 级联选择器
- JS组件系列之Bootstrap Icon图标选择组件
- Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍
- 很不错的两款Bootstrap Icon图标选择组件
- BootstrapBlazor 组件库使用体验---Table篇
- Bootstrap Blazor 组件介绍
- 组件-Element---Cascader(级联选择器)
- 组件element------form组件(1),Radio 单选框-----Cascader 级联选择器
- elementUi Cascader 级联选择器如何选择任意一级,以及所遇到的问题
- bootstrap treeview 树形菜单带复选框及级联选择功能
- 重构日期选择级联组件
- bootstrap multiselect插件级联选择框操作 内容从json文件获取
- element-ui 中 Cascader 级联选择器同时获取value值和label值
- 使用element UI Cascader 级联选择器实现简单的选择生日日期的功能(没有年份)
- elementUI的cascader级联选择控件的默认值(回显)问题
- 使用iview的Cascader 级联选择报错:Error in callback for watcher "data": "TypeError: Cannot read property
- bootstrap-daterangepicker:最好用的日期范围选择组件
- Blazor 组件库 BootstrapBlazor 中Tag组件介绍