mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 13:39:39 +08:00
!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:
parent
521ac4e840
commit
0ec379b028
@ -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 ?? "";
|
||||
}
|
@ -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();
|
||||
}
|
||||
}
|
@ -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();
|
||||
}
|
||||
}
|
@ -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="false"</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="false"</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",
|
||||
|
@ -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="false"</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="false"</code>",
|
||||
"ShowDropdownListOnFocusDesc": "参数 <code>ShowDropdownListOnFocus</code> 默认值为 <code>true</code> 组件获得焦点后会自动展开候选项下拉框,设置为 <code>false</code> 后关闭这个特性",
|
||||
"Att1": "匹配数据时显示的数量",
|
||||
"Att2": "无匹配数据时显示提示信息",
|
||||
"Def2": "无匹配数据",
|
||||
|
@ -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()" />
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user