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

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>
。有两个用处

  1. 在没有

    ConsutomFilter
    的时候筛选内容。

  2. 当选中项目的时候将文字放入输入框。

OnCustomFilter
:自定义过滤器,类型为
Func<string, Task<IEnumerable<TValue>>>
,用来处理自定义的筛选事件。此过滤器会覆盖
OnGetDisplayText
的筛选结果。

OnSelectedItemChanged
:选项改变回调方法,类型为
Func<TValue, Task>
,当选择了下拉列表中某一项时会回调对应的内容。

Template
RenderFragment<TValue>
,下拉列表的样式模板。

SkipEnter
:是否跳过Enter键的处理。

SkipEsc
:是否跳过Esc键的处理。

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