!3668 doc(#I67BCV): update AutoFill Demos

* Merge branch 'main' into I67BCV-AutoFill
* doc: 更新 AutoFill 示例精简例子代码
* chore: 更新资源文件
* update AutoFill Demos
* doc: 更新资源文件移除 Description 键值
* doc: 格式化文档
* Merge branch 'main' into I67BCV-AutoFill
* Merge remote-tracking branch 'origin/I67BCV-AutoFill' into I67BCV-AutoFill
* Merge remote-tracking branch 'origin/I67BCV-AutoFill' into I67BCV-AutoFill
* Merge remote-tracking branch 'origin/I67BCV-AutoFill' into I67BCV-AutoFill
* update AutoFill demos
* update AutoFill demos
This commit is contained in:
Lambert Lee 2022-12-25 08:57:31 +00:00 committed by Argo
parent 521ac4e840
commit 0ec379b028
7 changed files with 173 additions and 128 deletions

View File

@ -0,0 +1,53 @@
<AutoFill TValue="Foo" Value="Model" Items="Items" OnCustomFilter="OnCustomFilter"
OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3">
<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>
<EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
@code {
[NotNull]
private Foo Model { get; set; } = new();
[NotNull]
private IEnumerable<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
/// <summary>
/// OnInitialized method
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(LocalizerFoo);
Model = Items.First();
}
private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
{
var items = string.IsNullOrEmpty(searchText) ? Items : Items.Where(i => i.Count > 50 && i.Name!.Contains(searchText));
return Task.FromResult(items);
}
private Task OnSelectedItemChanged(Foo foo)
{
Model = Utility.Clone(foo);
StateHasChanged();
return Task.CompletedTask;
}
private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";
}

View File

@ -0,0 +1,45 @@
<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" />
@code {
[NotNull]
private Foo Model { get; set; } = new();
private Task OnSelectedItemChanged(Foo foo)
{
Model = Utility.Clone(foo);
StateHasChanged();
return Task.CompletedTask;
}
private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";
[NotNull]
private IEnumerable<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(LocalizerFoo);
Model = Items.First();
}
}

View File

@ -0,0 +1,37 @@
<AutoFill TValue="Foo" Value="Model" Items="Items" ShowDropdownListOnFocus="false"
OnGetDisplayText="OnGetDisplayText" class="mb-3">
<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>
<EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
@code {
[NotNull]
private Foo Model { get; set; } = new();
private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";
[NotNull]
private IEnumerable<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(LocalizerFoo);
Model = Items.First();
}
}

View File

@ -2002,26 +2002,17 @@
"ButtonText": "SetTitle"
},
"BootstrapBlazor.Shared.Samples.AutoFills": {
"H1": "AutoFill components",
"P1": "Auto-fill forms when selected via IntelliSense prompt option",
"P2": "Basic usage",
"P3": "fill the form",
"P4": "input",
"P5": "Name smart prompt, automatically fill in the form below after selecting the prompt item Currently supports keyboard",
"P6": "custom filter",
"P7": "Filter data by setting custom filter condition callback delegate <code>OnCustomFilter</code>",
"P8": "input",
"P9": "Name intelligent prompt, call back the delegate by setting custom filter conditions",
"P10": "Filter data, the current filter condition is",
"P11": "contains the input string",
"P12": "and",
"P13": "value greater than",
"P14": "Turn off auto-expand dropdown",
"P15": "By setting <code>ShowDropdownListOnFocus=&quot;false&quot;</code>",
"P16": "parameter",
"P17": "Default is",
"P18": "After the component gets the focus, it will automatically expand the candidate drop-down box, set to",
"P19": "turn off this feature",
"Title": "AutoFill components",
"Description": "Auto-fill forms when selected via IntelliSense prompt option",
"NormalTitle": "Basic usage",
"NormalIntro": "fill the form",
"NormalDesc": "input <code>Name</code> Name smart prompt, automatically fill in the form below after selecting the prompt item Currently supports keyboard <kbd>Enter</kbd> <kbd>Spance</kbd> <kbd><i class=\"fa-solid fa-arrow-up\"></i></kbd> <kbd><i class=\"fa-solid fa-arrow-down\"></i></kbd>",
"CustomFilterTitle": "custom filter",
"CustomFilterIntro": "Filter data by setting custom filter condition callback delegate <code>OnCustomFilter</code>",
"CustomFilterDesc": "Enter the <code>name</code> intelligent prompt, and delegate <code>OnCustomFilter</code> to filter data by setting a user-defined filter condition callback. The current filter condition is that <code>Name</code> contains the input string <code>Count</code> and the value is greater than <b>50</b>",
"ShowDropdownListOnFocusTitle": "Turn off auto-expand dropdown",
"ShowDropdownListOnFocusIntro": "By setting <code>ShowDropdownListOnFocus=&quot;false&quot;</code>",
"ShowDropdownListOnFocusDesc": "parameter <code>ShowDropdownListOnFocus</code> the default value is <code>true</code>. After the component gets the focus, it will automatically expand the candidate drop-down box, set to <code>false</code> turn off this feature",
"Att1": "The number to display when matching data",
"Att2": "Display a message when there is no matching data",
"Def2": "No matching data",

View File

@ -2003,26 +2003,17 @@
"ButtonText": "更改标题"
},
"BootstrapBlazor.Shared.Samples.AutoFills": {
"H1": "AutoFill 自动填充组件",
"P1": "通过智能感应提示选项,选中后自动填充表单",
"P2": "基本用法",
"P3": "填充表单",
"P4": "录入",
"P5": "姓名智能提示,选择提示项后自动填充下方表单 目前支持键盘",
"P6": "自定义过滤条件",
"P7": "通过设置自定义过滤条件回调委托 <code>OnCustomFilter</code> 过滤数据",
"P8": "录入",
"P9": "姓名智能提示,通过设置自定义过滤条件回调委托",
"P10": "过滤数据,当前过滤条件为",
"P11": "包含输入字符串",
"P12": "并且",
"P13": "值大于",
"P14": "关闭自动展开下拉框",
"P15": "通过设置 <code>ShowDropdownListOnFocus=&quot;false&quot;</code>",
"P16": "参数",
"P17": "默认值为",
"P18": "组件获得焦点后会自动展开候选项下拉框,设置为",
"P19": "后关闭这个特性",
"Title": "AutoFill 自动填充组件",
"Description": "通过智能感应提示选项,选中后自动填充表单",
"NormalTitle": "基本用法",
"NormalIntro": "填充表单",
"NormalDesc": "录入 <code>Name</code> 姓名智能提示,选择提示项后自动填充下方表单 目前支持键盘 <kbd>Enter</kbd> <kbd>Spance</kbd> <kbd><i class=\"fa-solid fa-arrow-up\"></i></kbd> <kbd><i class=\"fa-solid fa-arrow-down\"></i></kbd>",
"CustomFilterTitle": "自定义过滤条件",
"CustomFilterIntro": "通过设置自定义过滤条件回调委托 <code>OnCustomFilter</code> 过滤数据",
"CustomFilterDesc": "录入 <code>Name</code> 姓名智能提示,通过设置自定义过滤条件回调委托 <code>OnCustomFilter</code> 过滤数据,当前过滤条件为 <code>Name</code> 包含输入字符串 <code>Count</code> 并且 值大于 50",
"ShowDropdownListOnFocusTitle": "关闭自动展开下拉框",
"ShowDropdownListOnFocusIntro": "通过设置 <code>ShowDropdownListOnFocus=&quot;false&quot;</code>",
"ShowDropdownListOnFocusDesc": "参数 <code>ShowDropdownListOnFocus</code> 默认值为 <code>true</code> 组件获得焦点后会自动展开候选项下拉框,设置为 <code>false</code> 后关闭这个特性",
"Att1": "匹配数据时显示的数量",
"Att2": "无匹配数据时显示提示信息",
"Def2": "无匹配数据",

View File

@ -1,62 +1,26 @@
@page "/autofills"
@inject IStringLocalizer<AutoFills> Localizer
<h3>@Localizer["H1"]</h3>
<h4>@Localizer["P1"]</h4>
<h3>@Localizer["Title"]</h3>
<h4>@Localizer["Description"]</h4>
<DemoBlock Title="@Localizer["P2"]" Introduction="@Localizer["P3"]" Name="Normal">
<div class="mb-3">@Localizer["P4"] <code>Name</code> @Localizer["P5"] <kbd>Enter</kbd> <kbd>Spance</kbd> <kbd><i class="fa-solid fa-arrow-up"></i></kbd> <kbd><i class="fa-solid fa-arrow-down"></i></kbd></div>
<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" />
<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]"
Name="Normal" Demo="AutoFill.AutoFillNormal">
<div class="mb-3">
@((MarkupString)@Localizer["NormalDesc"].Value)
</div>
</DemoBlock>
<DemoBlock Title="@Localizer["P6"]" Introduction="@Localizer["P7"]" Name="CustomFilter">
<div class="mb-3">@Localizer["P8"] <code>Name</code> @Localizer["P9"] <code>OnCustomFilter</code> @Localizer["P10"] <code>Name</code> @Localizer["P11"] <b>@Localizer["P12"]</b> <code>Count</code> @Localizer["P13"] 50</div>
<AutoFill TValue="Foo" Value="Model" Items="Items" OnCustomFilter="OnCustomFilter" OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3">
<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>
<EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
<DemoBlock Title="@Localizer["CustomFilterTitle"]" Introduction="@Localizer["CustomFilterIntro"]"
Name="CustomFilter" Demo="AutoFill.AutoFillCustomFilter">
<div class="mb-3">@((MarkupString)Localizer["CustomFilterDesc"].Value)</div>
</DemoBlock>
<DemoBlock Title="@Localizer["P14"]" Introduction="@Localizer["P15"]" Name="ShowDropdownListOnFocus">
<div class="mb-3">@Localizer["P16"] <code>ShowDropdownListOnFocus</code> @Localizer["P17"] <code>true</code> @Localizer["P18"] <code>false</code> @Localizer["P19"]</div>
<AutoFill TValue="Foo" Value="Model" Items="Items" ShowDropdownListOnFocus="false" OnGetDisplayText="OnGetDisplayText" class="mb-3">
<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>
<EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
<DemoBlock Title="@Localizer["ShowDropdownListOnFocusTitle"]" Introduction="@Localizer["ShowDropdownListOnFocusIntro"]"
Name="ShowDropdownListOnFocus" Demo="AutoFill.AutoFillShowDropdownListOnFocus">
<div class="mb-3">
@((MarkupString)@Localizer["ShowDropdownListOnFocusDesc"].Value)
</div>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />

View File

@ -5,46 +5,10 @@
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
///
/// </summary>
partial class AutoFills
{
[NotNull]
private Foo Model { get; set; } = new();
[NotNull]
private IEnumerable<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
/// <summary>
/// OnInitialized method
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(LocalizerFoo);
Model = Items.First();
}
private Task OnSelectedItemChanged(Foo foo)
{
Model = Utility.Clone(foo);
StateHasChanged();
return Task.CompletedTask;
}
private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";
private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
{
var items = string.IsNullOrEmpty(searchText) ? Items : Items.Where(i => i.Count > 50 && i.Name!.Contains(searchText));
return Task.FromResult(items);
}
/// <summary>
/// Get property method
/// </summary>