您的位置:首页 > Web前端 > BootStrap

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)

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: