Blazor 组件库 BootstrapBlazor 中AutoFill组件介绍
2022-05-04 22:28
1056 查看
组件介绍
AutoFill自动填充组件
通过智能感应提示选项,选中后自动填充表单。
他的代码如下:
<AutoFill TValue="Foo" Value="Model" Items="Items" IsLikeMatch="true" OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true"> <Template> <div class="d-flex"> <div> <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" /> </div> <div class="ps-2"> <div>@context.Name</div> <div class="bb-sub">@Foo.GetTitle(context.Id)</div> </div> </div> </Template> </AutoFill> <img src="@Foo.GetAvatarUrl(Model.Id)" class="shadow" style="width: 140px; margin-bottom: 1rem; border-radius: 6px;" /> <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" /> private Task OnSelectedItemChanged(Foo foo) { Model = Utility.Clone(foo); StateHasChanged(); return Task.CompletedTask; }
组件的属性介绍
DisplayCount:候选项的匹配数量。
NoDataTip:无数据时的提示内容。默认值为
无匹配数据。
IgnoreCase:是否在匹配候选项时不区分大小写。默认为
true不区分大小写。
IsLikeMatch:是否启用模糊匹配,默认为
true启用模糊匹配。
Items:类型为
IEnumerable<TValue>,为要筛选的内容列表。
Debounce:防抖,单位为毫秒,默认为0,一般在需要跟数据库交互或者其他时间,对触发频率要求比较高的时候使用,在防抖时间内只会产生一条change事件。
OnGetDisplayText:获取显示在输入框中的文字。类型为
Func<TValue, string>。有两个用处
在没有
ConsutomFilter
的时候筛选内容。当选中项目的时候将文字放入输入框。
OnCustomFilter:自定义过滤器,类型为
Func<string, Task<IEnumerable<TValue>>>,用来处理自定义的筛选事件。此过滤器会覆盖
OnGetDisplayText的筛选结果。
OnSelectedItemChanged:选项改变回调方法,类型为
Func<TValue, Task>,当选择了下拉列表中某一项时会回调对应的内容。
Template:
RenderFragment<TValue>,下拉列表的样式模板。
SkipEnter:是否跳过Enter键的处理。
SkipEsc:是否跳过Esc键的处理。
相关文章推荐
- Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍
- Bootstrap Blazor 组件介绍
- Blazor 组件库 BootstrapBlazor 中CheckboxList组件介绍
- Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍
- Blazor 组件库 BootstrapBlazor 中Tag组件介绍
- Bootstrap Blazor Cascader 级联选择组件
- BootstrapBlazor - EditorForm 表单组件(一)
- Twitter-bootstrap-typeahead——一款模糊查询的jQuery支持ajax的组件介绍
- BootstrapBlazor--Input 组件
- BootstrapBlazor 智能生成神器(一)AutoGenerateColumnAttribute 特性介绍
- Blazor Bootstrap 组件库建立工程快速上手
- Bootstrap组件介绍
- BootstrapBlazor 组件库使用体验---Table篇
- Bootstrap分布组件使用介绍
- 创建vue项目步骤、项目目录介绍、es6语法之导入导出、定义并使用组件、集成bootstrap,jQuery,elementui、与后端交互
- Bootstrap Blazor 组件入门
- POI组件介绍:HWPF 和 XWPF
- bootstrap的常用组件和栅格式布局详解
- JS组件系列——两种bootstrap multiselect组件大比拼
- Bootstrap学习笔记(一):bootstrap总体介绍