mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-08 23:18:53 +08:00
!3666 doc(#I67B9R): update AutoComplete demos
* Merge branch 'main' into I67B9R-AutoComplete * restore launchSettings.json * update autocomplete demos
This commit is contained in:
代码搬运工
Argo
parent
f21898874c
commit
f1201feecd
@ -0,0 +1,23 @@
|
||||
@inject IStringLocalizer<AutoCompleteDebounce> Localizer
|
||||
|
||||
<p>@Localizer["Description"]</p>
|
||||
<div style="width: 200px;">
|
||||
<AutoComplete Items="@Items" ValueChanged="@OnValueChanged" Debounce="500"/>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private readonly List<string> _items = new();
|
||||
|
||||
private IEnumerable<string> Items => _items;
|
||||
|
||||
private Task OnValueChanged(string val)
|
||||
{
|
||||
_items.Clear();
|
||||
_items.Add($"{val}@163.com");
|
||||
_items.Add($"{val}@126.com");
|
||||
_items.Add($"{val}@sina.com");
|
||||
_items.Add($"{val}@hotmail.com");
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
@inject IStringLocalizer<AutoCompleteGroup> Localizer
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]"/>
|
||||
<AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]"/>
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]"/>
|
||||
<AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]"/>
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
</div>
|
||||
<BlockLogger @ref="Trace" class="mt-3"/>
|
||||
|
||||
@code {
|
||||
private static List<string> StaticItems => new() { "1", "12", "123", "1234", "12345", "123456", "abc", "abcdef", "ABC", "aBcDeFg", "ABCDEFG" };
|
||||
[NotNull]
|
||||
private BlockLogger? Trace { get; set; }
|
||||
private Task OnSelectedItemChanged(string val)
|
||||
{
|
||||
Trace.Log($"Value: {val}");
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
<AutoComplete Items="@StaticItems">
|
||||
<ItemTemplate>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fa-solid fa-bell"></i>
|
||||
<span class="flex-fill ms-2">@context</span>
|
||||
</div>
|
||||
</ItemTemplate>
|
||||
</AutoComplete>
|
||||
|
||||
@code {
|
||||
private static List<string> StaticItems => new() { "1", "12", "123", "1234", "12345", "123456", "abc", "abcdef", "ABC", "aBcDeFg", "ABCDEFG" };
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
@inject IStringLocalizer<AutoCompleteLikeMatch> Localizer
|
||||
|
||||
<p>@Localizer["Description"]</p>
|
||||
<div style="width: 200px;">
|
||||
<AutoComplete Items="@StaticItems" IsLikeMatch="true" IgnoreCase="false" />
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private static List<string> StaticItems => new() { "1", "12", "123", "1234", "12345", "123456", "abc", "abcdef", "ABC", "aBcDeFg", "ABCDEFG" };
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
@inject IStringLocalizer<AutoCompleteNoDataTip> Localizer
|
||||
|
||||
<p>@Localizer["Description"]</p>
|
||||
<div style="width: 200px;">
|
||||
<AutoComplete Items="@StaticItems" NoDataTip="@Localizer["NoDataTip"]" />
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private static List<string> StaticItems => new() { "1", "12", "123", "1234", "12345", "123456", "abc", "abcdef", "ABC", "aBcDeFg", "ABCDEFG" };
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
@inject IStringLocalizer<AutoCompleteNormal> Localizer
|
||||
|
||||
<p>@Localizer["Description"]</p>
|
||||
<div style="width: 200px;">
|
||||
<AutoComplete Items="@StaticItems" IsSelectAllTextOnFocus="true"/>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private static List<string> StaticItems => new() { "1", "12", "123", "1234", "12345", "123456", "abc", "abcdef", "ABC", "aBcDeFg", "ABCDEFG" };
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
|
||||
<AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
|
||||
<BlockLogger @ref="Trace" class="mt-3"/>
|
||||
|
||||
@code {
|
||||
[NotNull]
|
||||
private BlockLogger? Trace { get; set; }
|
||||
|
||||
private static List<string> StaticItems => new() { "1", "12", "123", "1234", "12345", "123456", "abc", "abcdef", "ABC", "aBcDeFg", "ABCDEFG" };
|
||||
private Task OnSelectedItemChanged(string val)
|
||||
{
|
||||
Trace.Log($"Value: {val}");
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
@inject IStringLocalizer<AutoCompleteShowLabel> Localizer
|
||||
|
||||
<p>@((MarkupString)Localizer["Description"].Value)</p>
|
||||
<Divider Text="@Localizer["Divider1Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
|
||||
<ValidateForm Model="@Model">
|
||||
<AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true"/>
|
||||
</ValidateForm>
|
||||
<Divider Text="@Localizer["Divider2Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"/>
|
||||
<AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false"/>
|
||||
<Divider Text="@Localizer["Divider3Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
|
||||
<AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" DisplayText="@Localizer["AutoText"]" ShowLabel="true"/>
|
||||
|
||||
@code {
|
||||
private Foo Model { get; set; } = new Foo() { Name = "" };
|
||||
private static List<string> StaticItems => new() { "1", "12", "123", "1234", "12345", "123456", "abc", "abcdef", "ABC", "aBcDeFg", "ABCDEFG" };
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
@inject IStringLocalizer<AutoCompleteValueChanged> Localizer
|
||||
|
||||
<p>@Localizer["Description"]</p>
|
||||
<div style="width: 200px;">
|
||||
<AutoComplete Items="@Items" ValueChanged="@OnValueChanged" />
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private readonly List<string> _items = new();
|
||||
private IEnumerable<string> Items => _items;
|
||||
private Task OnValueChanged(string val)
|
||||
{
|
||||
_items.Clear();
|
||||
_items.Add($"{val}@163.com");
|
||||
_items.Add($"{val}@126.com");
|
||||
_items.Add($"{val}@sina.com");
|
||||
_items.Add($"{val}@hotmail.com");
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
}
|
||||
@ -1007,7 +1007,6 @@
|
||||
"P3": "portal",
|
||||
"P4": "If the component brings you convenience, please help to light up the project"
|
||||
},
|
||||
|
||||
"BootstrapBlazor.Shared.Pages.Localization": {
|
||||
"Title": "Localization",
|
||||
"P1": "Localization is the process of customizing an application for a given language and region.",
|
||||
@ -2040,33 +2039,20 @@
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.AutoCompletes": {
|
||||
"Title": "AutoComplete",
|
||||
"H1": "The input box autocompletes the function",
|
||||
"Description": "The input box autocompletes the function",
|
||||
"Block1Title": "Basic usage",
|
||||
"Block1Intro": "By setting <code>Items</code> data collection when the user types information that is automatically displayed",
|
||||
"P1": "In this example, type 123 strings to display the viewing effect, automatically give the component initialization to the auto-prompt dataset, and the dataset does not change",
|
||||
"Block2Title": "Blur queries and ignore case",
|
||||
"Block2Intro": "By setting the <code>IsLikeMatch</code> value settings to turn on fuzzy matching of collections, you control whether case is ignored by setting the <code>IgnoreCase</code>",
|
||||
"P2": "In this example, type the abc string to display the viewing effect and select all matches in the collection that contain abc and have the same case",
|
||||
"Block3Title": "Custom prompt message",
|
||||
"Block3Intro": "By setting the <code>NoDataTip</code> value setting automatically completes the custom prompt message that appears when the data is not found",
|
||||
"P3": "In this example, type 567 strings because the autocomplete information center does not display custom prompt information - <code>the data you want is not found</code>",
|
||||
"AutoTip": "There is nothing",
|
||||
"Block4Title": "Custom candidates",
|
||||
"Block4Intro": "By setting up <code>ValueChanged</code> callback method reorganizes the data collection based on the data entered by the user before prompting for information",
|
||||
"P4": "In this example, type any string to display the viewing effect, and automatically complete the component's dynamic changes from the newly obtained prompt dataset based on the string you type",
|
||||
"Block5Title": "The label is displayed",
|
||||
"Block5Intro": "When a component binds in both directions, it automatically determines whether label text is displayed based on the conditions",
|
||||
"P5": "The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component of the <a href='inputs'>[portal]</a>",
|
||||
"DebounceTitle": "Debounce",
|
||||
"DebounceIntro": "Set <code>Debounce</code> value turn on debounce",
|
||||
"DebounceDetails": "In this example, please type any string to display the viewing effect. Within the anti shake time, the auto completion component will only send the results to the back end after the last entry, which will greatly improve the performance",
|
||||
"Divider1Text": "Bidirectional binding displays labels",
|
||||
"Divider2Text": "Bidirectional bindings do not display labels",
|
||||
"Divider3Text": "Customize DisplayText",
|
||||
"AutoText": "Custom city",
|
||||
"BlockGroupTitle": "InputGroup",
|
||||
"BlockGroupPrevLabel": "Prev",
|
||||
"BlockGroupSuffixLabel": "Suffix",
|
||||
"BlockGroupIntro": "combox with <code>BootstrapInputGroupLabel</code> inside <code>BootstrapInputGroupLabel</code>",
|
||||
"ItemTemplateTitle": "ItemTemplate",
|
||||
"ItemTemplateIntro": "Set <code>ItemTemplate</code> for customer the dropdown item",
|
||||
@ -2089,6 +2075,33 @@
|
||||
"OnSelectedItemChangedIntro": "Click the dropdown item or <kbd>Enter</kbd> trigger the callback",
|
||||
"OnValueChanged": "Callback for the Value changed"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteNormal": {
|
||||
"Description": "In this example, type 123 strings to display the viewing effect, automatically give the component initialization to the auto-prompt dataset, and the dataset does not change"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteLikeMatch": {
|
||||
"Description": "In this example, type the abc string to display the viewing effect and select all matches in the collection that contain abc and have the same case"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteNoDataTip": {
|
||||
"Description": "In this example, type 567 strings because the autocomplete information center does not display custom prompt information - <code>the data you want is not found</code>",
|
||||
"NoDataTip": "There is nothing"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteValueChanged": {
|
||||
"Description": "In this example, type any string to display the viewing effect, and automatically complete the component's dynamic changes from the newly obtained prompt dataset based on the string you type"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteShowLabel": {
|
||||
"Description": "The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component of the <a href='inputs'>[portal]</a>",
|
||||
"Divider1Text": "Bidirectional binding displays labels",
|
||||
"Divider2Text": "Bidirectional bindings do not display labels",
|
||||
"Divider3Text": "Customize DisplayText",
|
||||
"AutoText": "Custom city"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteDebounce": {
|
||||
"Description": "In this example, please type any string to display the viewing effect. Within the anti shake time, the auto completion component will only send the results to the back end after the last entry, which will greatly improve the performance"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteGroup": {
|
||||
"BlockGroupPrevLabel": "Prev",
|
||||
"BlockGroupSuffixLabel": "Suffix"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.FullScreens": {
|
||||
"Title": "FullScreen",
|
||||
"H1": "Human-computer interaction by injecting service calls <code>Show</code> method pop-ups",
|
||||
@ -3638,7 +3651,6 @@
|
||||
"P21": "Used in the form",
|
||||
"P22": "Build components into <code>ValidateForm</code> used in",
|
||||
"P23": "Submit",
|
||||
|
||||
"Attr1": "",
|
||||
"Attr2": "",
|
||||
"Attr3": "",
|
||||
@ -3649,7 +3661,6 @@
|
||||
"Attr8": "",
|
||||
"Attr9": "",
|
||||
"Attr10": "",
|
||||
|
||||
"Event1": "",
|
||||
"Event2": "",
|
||||
"Event3": ""
|
||||
|
||||
@ -2040,36 +2040,23 @@
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.AutoCompletes": {
|
||||
"Title": "AutoComplete 自动完成",
|
||||
"H1": "输入框自动完成功能",
|
||||
"Description": "输入框自动完成功能",
|
||||
"Block1Title": "基础用法",
|
||||
"Block1Intro": "通过设置 <code>Items</code> 数据集合当用户键入信息时自动显示提示信息",
|
||||
"P1": "本例中请键入 123 字符串显示查看效果，自动完成组件初始化时给了自动提示数据集并且数据集无变化",
|
||||
"Block2Title": "模糊查询并忽略大小写",
|
||||
"Block2Intro": "通过设置 <code>IsLikeMatch</code> 值设置是否开启集合的模糊匹配，通过设置 <code>IgnoreCase</code> 来控制是否忽略大小写",
|
||||
"P2": "本例中请键入 abc 字符串显示查看效果，会将集合中所有包含 abc 且大小写相同的匹配出来供选择",
|
||||
"Block3Title": "自定义提示消息",
|
||||
"Block3Intro": "通过设置 <code>NoDataTip</code> 值设置自动完成数据未找到时显示的自定义提示消息",
|
||||
"P3": "本例中请键入 567 字符串由于自动完成信息中心无数据显示自定义提示信息 - <code>没有找到你想要的数据</code>",
|
||||
"AutoTip": "没有找到你想要的数据",
|
||||
"Block4Title": "自定义候选项",
|
||||
"Block4Intro": "通过设置 <code>ValueChanged</code> 回调方法根据用户输入的数据进行重组数据集合再进行提示信息",
|
||||
"P4": "本例中请键入任意字符串显示查看效果，自动完成组件根据键入的字符串从新获取提示信息数据集动态变化",
|
||||
"Block5Title": "显示标签",
|
||||
"Block5Intro": "组件双向绑定时会根据条件自动判断是否显示标签文字",
|
||||
"P5": "前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href='inputs'>[传送门]</a>",
|
||||
"DebounceTitle": "设置防抖",
|
||||
"DebounceIntro": "通过设置 <code>Debounce</code> 时长，来开启 <code>js</code> 防抖",
|
||||
"DebounceDetails": "本例中请键入任意字符串显示查看效果，自动完成组件在防抖时间内，只在最后一次录入后将结果发送到后端，这将大大提高性能",
|
||||
"Divider1Text": "双向绑定显示标签",
|
||||
"Divider2Text": "双向绑定不显示标签",
|
||||
"Divider3Text": "自定义 DisplayText",
|
||||
"BlockGroupTitle": "组合使用",
|
||||
"BlockGroupPrevLabel": "前置标签",
|
||||
"BlockGroupSuffixLabel": "后置标签",
|
||||
"BlockGroupIntro": "内置 <code>BootstrapInputGroup</code> 中使用，与 <code>BootstrapInputGroupLabel</code> 组合使用",
|
||||
"ItemTemplateTitle": "候选项模板",
|
||||
"ItemTemplateIntro": "通过设置 <code>ItemTemplate</code> 对下拉框候选项进行自定义设置",
|
||||
"AutoText": "自定义城市",
|
||||
"Att1": "是否显示前置标签",
|
||||
"Att2": "内容",
|
||||
"Att3": "内容",
|
||||
@ -2089,6 +2076,33 @@
|
||||
"OnSelectedItemChangedIntro": "点击下拉菜单或者 <kbd>Enter</kbd> 回车时触发此回调方法",
|
||||
"OnValueChanged": "Value 改变时回调方法"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteNormal": {
|
||||
"Description": "本例中请键入 123 字符串显示查看效果，自动完成组件初始化时给了自动提示数据集并且数据集无变化"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteLikeMatch": {
|
||||
"Description": "本例中请键入 123 字符串显示查看效果，自动完成组件初始化时给了自动提示数据集并且数据集无变化"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteNoDataTip": {
|
||||
"Description": "本例中请键入 567 字符串由于自动完成信息中心无数据显示自定义提示信息 - <code>没有找到你想要的数据</code>",
|
||||
"NoDataTip": "没有找到你想要的数据"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteValueChanged": {
|
||||
"Description": "本例中请键入任意字符串显示查看效果，自动完成组件根据键入的字符串从新获取提示信息数据集动态变化"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteShowLabel": {
|
||||
"Description": "前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href='inputs'>[传送门]</a>",
|
||||
"Divider1Text": "双向绑定显示标签",
|
||||
"Divider2Text": "双向绑定不显示标签",
|
||||
"Divider3Text": "自定义 DisplayText",
|
||||
"AutoText": "自定义城市"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteDebounce": {
|
||||
"Description": "本例中请键入任意字符串显示查看效果，自动完成组件在防抖时间内，只在最后一次录入后将结果发送到后端，这将大大提高性能"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.AutoComplete.AutoCompleteGroup": {
|
||||
"BlockGroupPrevLabel": "前置标签",
|
||||
"BlockGroupSuffixLabel": "后置标签"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.FullScreens": {
|
||||
"Title": "FullScreen 全屏",
|
||||
"H1": "通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互",
|
||||
@ -2608,7 +2622,6 @@
|
||||
"ValidateRules": "自定义验证集合",
|
||||
"P8": "可通过设置 <code>IsSelectAllTextOnEnter</code> 用户按下 Enter 键自动选择输入框内所有字符串 ",
|
||||
"P9": "执行 @ref.SelectAllTextAsync() 选择输入框内所有字符串"
|
||||
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.InputNumbers": {
|
||||
"Title": "InputNumber 组件",
|
||||
|
||||
@ -3,93 +3,33 @@
|
||||
|
||||
<h3>@Localizer["Title"]</h3>
|
||||
|
||||
<h4>@Localizer["H1"]</h4>
|
||||
<h4>@Localizer["Description"]</h4>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
|
||||
<p>@Localizer["P1"]</p>
|
||||
<div style="width: 200px;">
|
||||
<AutoComplete Items="@StaticItems" IsSelectAllTextOnFocus="true" />
|
||||
</div>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]"
|
||||
Name="Normal" Demo="AutoComplete.AutoCompleteNormal"/>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="LikeMatch">
|
||||
<p>@Localizer["P2"]</p>
|
||||
<div style="width: 200px;">
|
||||
<AutoComplete Items="@StaticItems" IsLikeMatch="true" IgnoreCase="false" />
|
||||
</div>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]"
|
||||
Name="LikeMatch" Demo="AutoComplete.AutoCompleteLikeMatch"/>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="NoDataTip">
|
||||
<p>@((MarkupString)Localizer["P3"].Value)</p>
|
||||
<div style="width: 200px;">
|
||||
<AutoComplete Items="@StaticItems" NoDataTip="@Localizer["AutoTip"]" />
|
||||
</div>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]"
|
||||
Name="NoDataTip" Demo="AutoComplete.AutoCompleteNoDataTip"/>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="ValueChanged">
|
||||
<p>@Localizer["P4"]</p>
|
||||
<div style="width: 200px;">
|
||||
<AutoComplete Items="@Items" ValueChanged="@OnValueChanged" />
|
||||
</div>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]"
|
||||
Name="ValueChanged" Demo="AutoComplete.AutoCompleteValueChanged"/>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="ShowLabel">
|
||||
<p>@((MarkupString)Localizer["P5"].Value)</p>
|
||||
<Divider Text="@Localizer["Divider1Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
|
||||
<ValidateForm Model="@Model">
|
||||
<AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" />
|
||||
</ValidateForm>
|
||||
<Divider Text="@Localizer["Divider2Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
|
||||
<AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false" />
|
||||
<Divider Text="@Localizer["Divider3Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
|
||||
<AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" DisplayText="@Localizer["AutoText"]" ShowLabel="true" />
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]"
|
||||
Name="ShowLabel" Demo="AutoComplete.AutoCompleteShowLabel"/>
|
||||
|
||||
<DemoBlock Title="@Localizer["DebounceTitle"]" Introduction="@Localizer["DebounceIntro"]" Name="Debounce">
|
||||
<p>@Localizer["DebounceDetails"]</p>
|
||||
<div style="width: 200px;">
|
||||
<AutoComplete Items="@Items" ValueChanged="@OnValueChanged" Debounce="500" />
|
||||
</div>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["DebounceTitle"]" Introduction="@Localizer["DebounceIntro"]"
|
||||
Name="Debounce" Demo="AutoComplete.AutoCompleteOnSelectedItemChanged"/>
|
||||
|
||||
<DemoBlock Title="@Localizer["OnSelectedItemChangedTitle"]" Introduction="@Localizer["OnSelectedItemChangedIntro"]" Name="OnSelectedItemChanged">
|
||||
<AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
|
||||
<BlockLogger @ref="Trace" class="mt-3" />
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["OnSelectedItemChangedTitle"]" Introduction="@Localizer["OnSelectedItemChangedIntro"]"
|
||||
Name="OnSelectedItemChanged" Demo="AutoComplete.AutoCompleteDebounce"/>
|
||||
|
||||
<DemoBlock Title="@Localizer["ItemTemplateTitle"]" Introduction="@Localizer["ItemTemplateIntro"]" Name="ItemTemplate">
|
||||
<AutoComplete Items="@StaticItems">
|
||||
<ItemTemplate>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fa-solid fa-bell"></i>
|
||||
<span class="flex-fill ms-2">@context</span>
|
||||
</div>
|
||||
</ItemTemplate>
|
||||
</AutoComplete>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["ItemTemplateTitle"]" Introduction="@Localizer["ItemTemplateIntro"]"
|
||||
Name="ItemTemplate" Demo="AutoComplete.AutoCompleteItemTemplate"/>
|
||||
|
||||
<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
|
||||
<AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
|
||||
<AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]"
|
||||
Name="Group" Demo="AutoComplete.AutoCompleteGroup"/>
|
||||
|
||||
<AttributeTable Items="@GetAttributes()" />
|
||||
<AttributeTable Items="@GetAttributes()"/>
|
||||
|
||||
@ -9,33 +9,6 @@ namespace BootstrapBlazor.Shared.Samples;
|
||||
/// </summary>
|
||||
public sealed partial class AutoCompletes
|
||||
{
|
||||
private readonly List<string> _items = new();
|
||||
|
||||
private IEnumerable<string> Items => _items;
|
||||
|
||||
private Foo Model { get; set; } = new Foo() { Name = "" };
|
||||
|
||||
private static List<string> StaticItems => new() { "1", "12", "123", "1234", "12345", "123456", "abc", "abcdef", "ABC", "aBcDeFg", "ABCDEFG" };
|
||||
|
||||
[NotNull]
|
||||
private BlockLogger? Trace { get; set; }
|
||||
|
||||
private Task OnSelectedItemChanged(string val)
|
||||
{
|
||||
Trace.Log($"Value: {val}");
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
private Task OnValueChanged(string val)
|
||||
{
|
||||
_items.Clear();
|
||||
_items.Add($"{val}@163.com");
|
||||
_items.Add($"{val}@126.com");
|
||||
_items.Add($"{val}@sina.com");
|
||||
_items.Add($"{val}@hotmail.com");
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 获得属性方法
|
||||
/// </summary>
|
||||
@ -43,56 +16,64 @@ public sealed partial class AutoCompletes
|
||||
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
|
||||
{
|
||||
// TODO: 移动到数据库中
|
||||
new AttributeItem() {
|
||||
new AttributeItem()
|
||||
{
|
||||
Name = "ShowLabel",
|
||||
Description = Localizer["Att1"],
|
||||
Type = "bool",
|
||||
ValueList = "true|false",
|
||||
DefaultValue = "true"
|
||||
},
|
||||
new AttributeItem() {
|
||||
new AttributeItem()
|
||||
{
|
||||
Name = "ChildContent",
|
||||
Description = Localizer["Att2"],
|
||||
Type = "RenderFragment",
|
||||
ValueList = " — ",
|
||||
DefaultValue = " — "
|
||||
},
|
||||
new AttributeItem() {
|
||||
new AttributeItem()
|
||||
{
|
||||
Name = "ItemTemplate",
|
||||
Description = Localizer["AttItemTemplate"],
|
||||
Type = "RenderFragment<string>",
|
||||
ValueList = " — ",
|
||||
DefaultValue = " — "
|
||||
},
|
||||
new AttributeItem() {
|
||||
new AttributeItem()
|
||||
{
|
||||
Name = "Items",
|
||||
Description = Localizer["Att3"],
|
||||
Type = "IEnumerable<string>",
|
||||
ValueList = " — ",
|
||||
DefaultValue = " — "
|
||||
},
|
||||
new AttributeItem() {
|
||||
new AttributeItem()
|
||||
{
|
||||
Name = "NoDataTip",
|
||||
Description = Localizer["Att4"],
|
||||
Type = "string",
|
||||
ValueList = " — ",
|
||||
DefaultValue = Localizer["Att4DefaultValue"]!
|
||||
},
|
||||
new AttributeItem() {
|
||||
new AttributeItem()
|
||||
{
|
||||
Name = "DisplayCount",
|
||||
Description = Localizer["Att5"],
|
||||
Type = "int?",
|
||||
ValueList = " — ",
|
||||
DefaultValue = " — "
|
||||
},
|
||||
new AttributeItem() {
|
||||
new AttributeItem()
|
||||
{
|
||||
Name = "ValueChanged",
|
||||
Description = Localizer["Att6"],
|
||||
Type = "Action<string>",
|
||||
ValueList = " — ",
|
||||
DefaultValue = " — "
|
||||
},
|
||||
new AttributeItem() {
|
||||
new AttributeItem()
|
||||
{
|
||||
Name = "IsLikeMatch",
|
||||
Description = Localizer["Att7"],
|
||||
Type = "bool",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user