Enterprise-level component library based on Bootstrap and BlazorMultiSelect
When you have multiple options, use the drop-down menu to present and provide a search for multiple choices
Color
Multi-select drop-down boxes in a variety of colors are available
Demo
...
...
...
...
...
...
...
...
A two-way binding value string
Bind a comma string-splitting string
Demo
The
mutltiSelect component data source Items and selected values the SelectItemsValue support bidirectional binding;In this example, the SelectItemsValue variable by binding bidirectionally, and chooses to change its value through the drop-down box. ...
北京
Beijing
A collection of bidirectional binding values
Bind a generic a collection of IEnumerable
Demo
In this example, the SelectArrayValues collection variable by binding bidirectionally, and selects to change its value through the drop-down box
...
An array of two-way bound values
Bind an array int[]
Demo
In this example, an array variable SelectedIntArrayValues selected by a bidirectional binding, selects to change its value through a drop-down box
...
Bidirectional binding enumerates the collection
Bind a generic a collection of IEnumerable
Demo
In this example, by binding SelectEnumValues collection variables in both directions, you choose to change their values through the drop-down box, and you do not need to set the Items parameter when enumeratingtype, the added feature is that the component tries to find resource files or DisplayAttribute And DescriptionAttribute labels attempt local translation, such as this example when switching to Chinese enumerates the values elementary schoolmiddle school
...
Primary
中学
Middle,Primary
Search function
Turn on search by setting the ShowSearch value
Demo
In this example, the search callback delegate method is set onSearchTextChanged to customize search results if the display text is used internally to make a fuzzy match when not set
...
北京
Beijing
Grouping
Alternatives are presented in groups
Demo
...
Disable the feature
Set the component disabled state by setting the IsDisabled value
Demo
The component does not respond when the state is disabled
...
北京
Events when the option changes
Get the currently selected data set change event by setting the onSelectedItemsChanged callback method by setting
Demo
...
北京
Client validation
When the drop-down box is not selected, it is blocked when the submit button is clicked.
Demo
When built into the ValidateForm component, client authentication is automatically turned on, and the binding model has Required tags
The label is displayed
When a component binds in both directions, it automatically determines whether label text is displayed based on the conditions
Demo
The pre-label explicit rules are consistent with the BootstrapInput component of the of the [The portal]
Bidirectional binding displays labels
Bidirectional bindings do not display labels
...
Customize DisplayText
...
Options for extra-long text
The candidate text is particularly long
Demo
...
Full and reverse buttons
By setting ShowToolbar value settings component displays the toolbox, by setting ShowDefaultButtons value settings component displays the default buttons, by setting ShowSearch value settings component displays the search box
Demo
...
Set the maximum and minimum number of options
Set the limit on the number of options available to components by setting the max Min values
Demo
You can select up to two options
...
Select at least two options
...
Extend the toolbar button
Customize features by setting ButtonTemplate custom toolbar buttons
Demo
...
Cascading bindings
The second drop-down box dynamically populates the content by selecting the different options for the first drop-down box.
Demo
In this example, clicking on the first drop-down box allows you to get the data source for the second multi-box by asynchronous means, and after assigning, call StateHasChanged to re-render the multi-box
...
Item Template
customer item template by set ItemTemplate
Demo
...
Popover dropdown menu
Set IsPopover to true, use popover render UI prevent The dropdown menu cannot be fully displayed because the parent container is set to overflow: hidden
Demo
...
Attributes
Loading...
Event
Loading...
@page "/multiselects"
@inject IStringLocalizer<MultiSelects> Localizer
<h3>MultiSelect</h3>
<h4>When you have multiple options, use the drop-down menu to present and provide a search for multiple choices</h4>
<DemoBlock Title="Color" Introduction="Multi-select drop-down boxes in a variety of colors are available" Name="Color">
<div class="row g-3">
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Items="@Items21"></MultiSelect>
</div>
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Primary" Items="@Items22"></MultiSelect>
</div>
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Success" Items="@Items23"></MultiSelect>
</div>
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Danger" Items="@Items24"></MultiSelect>
</div>
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Warning" Items="@Items25"></MultiSelect>
</div>
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Info" Items="@Items26"></MultiSelect>
</div>
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Secondary" Items="@Items27"></MultiSelect>
</div>
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Dark" Items="@Items28"></MultiSelect>
</div>
</div>
</DemoBlock>
<DemoBlock Title="A two-way binding value string" Introduction="Bind a comma string-splitting string" Name="BindingString">
<p>
<div>The <code>mutltiSelect</code> component data source <code>Items</code> and <b>selected values</b> the <code>SelectItemsValue</code> support bidirectional binding;In this example, the <code>SelectItemsValue</code> variable by binding bidirectionally, and chooses to change its value through the drop-down box. </div>
</p>
<div class="row g-3">
<div class="col-12 col-sm-6">
<MultiSelect Items="@Items4" @bind-Value="@SelectedItemsValue"></MultiSelect>
</div>
<div class="col-12 col-sm-6">
<Button Icon="fa-solid fa-plus" Text="Add" OnClick="@AddItems" class="me-1"></Button>
<Button Icon="fa-solid fa-minus" Text="Decrease" OnClick="@RemoveItems"></Button>
<Button Icon="fa-regular fa-trash-can" Text="Clear" OnClick="@ClearItems"></Button>
</div>
</div>
<div class="mt-3">@SelectedItemsValue</div>
</DemoBlock>
<DemoBlock Title="A collection of bidirectional binding values" Introduction="Bind a generic <code>a collection of IEnumerable<T></code>" Name="BindingCollection">
<p>In this example, the <code>SelectArrayValues</code> collection variable by binding bidirectionally, and selects to change its value through the drop-down box</p>
<div class="row g-3">
<div class="col-12 col-sm-6">
<MultiSelect Items="@Items5" @bind-Value="@SelectedArrayValues" Max="4" Min="2"></MultiSelect>
</div>
<div class="col-12 col-sm-6">
<Button Icon="fa-solid fa-plus" Text="Add" OnClick="@AddListItems" class="me-1"></Button>
<Button Icon="fa-solid fa-minus" Text="Decrease" OnClick="@RemoveListItems"></Button>
<Button Icon="fa-regular fa-trash-can" Text="Clear" OnClick="@ClearListItems"></Button>
</div>
</div>
<div class="mt-3">@(string.Join(",", SelectedArrayValues))</div>
</DemoBlock>
<DemoBlock Title="An array of two-way bound values" Introduction="Bind an array <code>int[]</code>" Name="BindingNumber">
<p>In this example, an array variable <code>SelectedIntArrayValues</code> selected by a bidirectional binding, selects to change its value through a drop-down box</p>
<div class="row g-3">
<div class="col-12 col-sm-6">
<MultiSelect Items="@LongItems" @bind-Value="@SelectedIntArrayValues"></MultiSelect>
</div>
<div class="col-12 col-sm-6">
<Button Icon="fa-solid fa-plus" Text="Add" OnClick="@AddArrayItems" class="me-1"></Button>
<Button Icon="fa-solid fa-minus" Text="Decrease" OnClick="@RemoveArrayItems"></Button>
<Button Icon="fa-regular fa-trash-can" Text="Clear" OnClick="@ClearArrayItems"></Button>
</div>
</div>
<div class="mt-3">@(string.Join(",", SelectedIntArrayValues))</div>
</DemoBlock>
<DemoBlock Title="Bidirectional binding enumerates the collection" Introduction="Bind a generic a collection of <code>IEnumerable<Enum></code>" Name="BindingEnumCollection">
<p>In this example, by binding <code>SelectEnumValues</code> collection variables in both directions, you choose to change their values through the drop-down box, <b>and you do not need to set the <code>Items</code> parameter when enumerating</b>type, the added feature is that the component tries to find resource files or <code>DisplayAttribute</code> And <code>DescriptionAttribute</code> labels attempt local translation, such as this example when switching to <b>Chinese</b> enumerates the values <b>elementary school</b><b>middle school </b></p>
<MultiSelect @bind-Value="@SelectedEnumValues"></MultiSelect>
<div class="mt-3">@(string.Join(",", SelectedEnumValues))</div>
</DemoBlock>
<DemoBlock Title="Search function" Introduction="Turn on search by setting the <code>ShowSearch</code> value" Name="Search">
<p>In this example, the search callback delegate method is set <code>onSearchTextChanged</code> to customize search results if the display text is used internally to make a fuzzy match when not set</p>
<MultiSelect Items="@Items6" @bind-Value="@SelectedItemsValue6" ShowSearch="true" OnSearchTextChanged="@OnSearch"></MultiSelect>
<div class="mt-3">@SelectedItemsValue6</div>
<BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>
<DemoBlock Title="Grouping" Introduction="Alternatives are presented in groups" Name="Group">
<div class="row g-3">
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Items="GroupItems" />
</div>
</div>
</DemoBlock>
<DemoBlock Title="Disable the feature" Introduction="Set the component disabled state by setting the <code>IsDisabled</code> value" Name="Disable">
<p>The component does not respond when the state is disabled</p>
<MultiSelect Items="@Items7" Value="@SelectedItemsValue7" IsDisabled="true" />
</DemoBlock>
<DemoBlock Title="Events when the option changes" Introduction="Get the currently selected data set change event by setting the <code>onSelectedItemsChanged</code> callback method by setting" Name="OptionChange">
<MultiSelect Items="@Items8" OnSelectedItemsChanged="@OnSelectedItemsChanged8" Value="@SelectedItemsValue8" />
<BlockLogger @ref="Trace2" class="mt-3" />
</DemoBlock>
<DemoBlock Title="Client validation" Introduction="When the drop-down box is not selected, it is blocked when the submit button is clicked." Name="ClientValidation">
<p>When built into the <code>ValidateForm</code> component, client authentication is automatically turned on, and the binding model has <code>Required</code> tags</p>
<ValidateForm Model="@Model">
<div class="row g-3">
<div class="col-12 col-sm-8">
<MultiSelect Items="Items8" @bind-Value="@Model.Address" />
</div>
<div class="col-12 col-sm-4 align-self-end">
<Button ButtonType="ButtonType.Submit">Submit</Button>
</div>
</div>
</ValidateForm>
</DemoBlock>
<DemoBlock Title="The label is displayed" Introduction="When a component binds in both directions, it automatically determines whether label text is displayed based on the conditions" Name="DispalyLabel">
<p>The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component of the of the <a href='inputs'>[The portal]</a></p>
<Divider Text="Bidirectional binding displays labels" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
<ValidateForm Model="@Foo">
<div class="row g-3">
<div class="col-12">
<MultiSelect Color="Color.Primary" Items="@Items9" @bind-Value="@Foo.Name" />
</div>
</div>
</ValidateForm>
<Divider Text="Bidirectional bindings do not display labels" Alignment="Alignment.Left" style="margin: 2rem 0;" />
<MultiSelect Color="Color.Primary" Items="@Items10" @bind-Value="@Foo.Name" />
<Divider Text="Customize DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
<MultiSelect Color="Color.Primary" Items="@Items11" @bind-Value="@Foo.Name" DisplayText="Custom name" ShowLabel="true" />
</DemoBlock>
<DemoBlock Title="Options for extra-long text" Introduction="The candidate text is particularly long" Name="VeryLongText">
<div style="max-width: 400px">
<MultiSelect Items="@LongItems1" @bind-Value="@SelectedLongItemsValue1" DisplayText="Extra long text" ShowLabel="true"></MultiSelect>
</div>
</DemoBlock>
<DemoBlock Title="Full and reverse buttons" Introduction="By setting <code>ShowToolbar</code> value settings component displays the toolbox, by setting <code>ShowDefaultButtons</code> value settings component displays the default buttons, by setting <code>ShowSearch</code> value settings component displays the search box" Name="Button">
<div style="max-width: 400px">
<MultiSelect Items="@LongItems2" @bind-Value="@SelectedLongItemsValue2" ShowToolbar="true" ShowSearch="true"></MultiSelect>
<p>@SelectedLongItemsValue2</p>
</div>
</DemoBlock>
<DemoBlock Title="Set the maximum and minimum number of options" Introduction="Set the limit on the number of options available to components by setting the <code>max</code> <code>Min</code> values" Name="MaxMin">
<div style="max-width: 300px">
<p>You can select up to two options</p>
<MultiSelect Items="@LongItems3" @bind-Value="@SelectedMaxItemsValue" Max="2"></MultiSelect>
</div>
<div style="max-width: 300px" class="mt-3">
<p>Select at least two options</p>
<MultiSelect Items="@LongItems4" @bind-Value="@SelectedMinItemsValue" Min="2"></MultiSelect>
</div>
</DemoBlock>
<DemoBlock Title="Extend the toolbar button" Introduction="Customize features by setting <code>ButtonTemplate</code> custom toolbar buttons" Name="ExpandButton">
<div style="max-width: 300px">
<MultiSelect Items="@LongItems5" @bind-Value="@SelectedLongItemsValue3" ShowToolbar="true" ShowDefaultButtons="false">
<ButtonTemplate>
<button class="btn" @onclick="@OnClickButton">Test</button>
</ButtonTemplate>
</MultiSelect>
</div>
</DemoBlock>
<DemoBlock Title="Cascading bindings" Introduction="The second drop-down box dynamically populates the content by selecting the different options for the first drop-down box." Name="Cascading">
<p>In this example, clicking on the first drop-down box allows you to get the data source for the second multi-box by asynchronous means, and after assigning, call <code>StateHasChanged</code> to re-render the <b>multi-box </b></p>
<div class="row g-3">
<div class="col-12 col-sm-6">
<Select TValue="string" Items="@Items3" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
</div>
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Items="@Items2" />
</div>
</div>
</DemoBlock>
<DemoBlock Title="Item Template" Introduction="customer item template by set <code>ItemTemplate</code>" Name="ItemTemplate">
<div class="row">
<div class="col-12 col-sm-6">
<MultiSelect TValue="string" Items="@TemplateItems">
<ItemTemplate>
<div class="mul-select-item">
<i class="fa-solid fa-font-awesome"></i>
<span>@context.Text</span>
<i class="fa-solid fa-font-awesome"></i>
</div>
</ItemTemplate>
</MultiSelect>
</div>
</div>
</DemoBlock>
<DemoBlock Title="Popover dropdown menu" Introduction="Set <code>IsPopover</code> to <b>true</b>, use <code>popover</code> render UI prevent The dropdown menu cannot be fully displayed because the parent container is set to <code>overflow: hidden</code>" Name="Popover">
<div class="row">
<div class="col-12 col-sm-6 overflow-hidden">
<MultiSelect TValue="string" Items="@Items" IsPopover="true" ShowSearch="true" ShowToolbar />
</div>
</div>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
<EventTable Items="@GetEvents()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public partial class MultiSelects
{
[NotNull]
private BlockLogger? Trace { get; set; }
[NotNull]
private BlockLogger? Trace2 { get; set; }
[NotNull]
private List<SelectedItem>? DataSource { get; set; }
[NotNull]
private List<SelectedItem>? LongDataSource { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items21 = GenerateItems();
Items22 = GenerateItems();
Items23 = GenerateItems();
Items24 = GenerateItems();
Items25 = GenerateItems();
Items26 = GenerateItems();
Items27 = GenerateItems();
Items28 = GenerateItems();
TemplateItems = GenerateItems();
// 初始化数据
DataSource = new List<SelectedItem>
{
new SelectedItem ("Beijing", "北京"),
new SelectedItem ("Shanghai", "上海"),
new SelectedItem ("Guangzhou", "广州")
};
LongDataSource = new List<SelectedItem>
{
new SelectedItem ("1", "特别甜的东瓜(特别甜的东瓜)"),
new SelectedItem ("2", "特别甜的西瓜(特别甜的西瓜)"),
new SelectedItem ("3", "特别甜的南瓜(特别甜的南瓜)"),
new SelectedItem ("4", "特别甜的傻瓜(特别甜的傻瓜)"),
new SelectedItem ("5", "特别甜的金瓜(特别甜的金瓜)"),
new SelectedItem ("6", "特别甜的木瓜(特别甜的木瓜)"),
new SelectedItem ("7", "特别甜的水瓜(特别甜的水瓜)"),
new SelectedItem ("8", "特别甜的火瓜(特别甜的火瓜)"),
new SelectedItem ("9", "特别甜的土瓜(特别甜的土瓜)"),
};
Items = GenerateItems();
Items4 = GenerateDataSource(DataSource);
Items5 = GenerateDataSource(DataSource);
Items6 = GenerateDataSource(DataSource);
Items7 = GenerateDataSource(DataSource);
Items8 = GenerateDataSource(DataSource);
Items9 = GenerateDataSource(DataSource);
Items10 = GenerateDataSource(DataSource);
Items11 = GenerateDataSource(DataSource);
LongItems = GenerateDataSource(LongDataSource);
LongItems1 = GenerateDataSource(LongDataSource);
LongItems2 = GenerateDataSource(LongDataSource);
LongItems3 = GenerateDataSource(LongDataSource);
LongItems4 = GenerateDataSource(LongDataSource);
LongItems5 = GenerateDataSource(LongDataSource);
}
private static List<SelectedItem> GenerateItems() => new()
{
new ("Beijing", "北京"),
new ("Shanghai", "上海"),
new ("Guangzhou", "广州"),
new ("Shenzhen", "深圳"),
new ("Chengdu", "成都"),
new ("Wuhan", "武汉"),
new ("Dalian", "大连"),
new ("Hangzhou", "杭州"),
new ("Lianyungang", "连云港")
};
private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();
/// <summary>
/// 级联绑定菜单
/// </summary>
/// <param name="item"></param>
private async Task OnCascadeBindSelectClick(SelectedItem item)
{
// 模拟异步获取数据源
await Task.Delay(100);
if (item.Value == "Beijing")
{
Items2 = new List<SelectedItem>(new[]
{
new SelectedItem("1","朝阳区") { Active = true },
new SelectedItem("2","海淀区")
});
}
else if (item.Value == "Shanghai")
{
Items2 = new List<SelectedItem>(new[]
{
new SelectedItem("1","静安区"),
new SelectedItem("2","黄浦区") {Active = true },
});
}
else
{
Items2 = new List<SelectedItem>();
}
StateHasChanged();
}
private void AddItems()
{
SelectedItemsValue = "Beijing,Shanghai,Guangzhou";
}
private void RemoveItems()
{
SelectedItemsValue = "Beijing";
}
private void ClearItems()
{
SelectedItemsValue = "";
}
private void AddListItems()
{
SelectedArrayValues = "Beijing,Shanghai".Split(',');
}
private void RemoveListItems()
{
SelectedArrayValues = new[] { "Beijing" };
}
private void ClearListItems()
{
SelectedArrayValues = Enumerable.Empty<string>();
}
private void AddArrayItems()
{
SelectedIntArrayValues = new[] { 1, 2, 3, 4 };
}
private void RemoveArrayItems()
{
SelectedIntArrayValues = new[] { 1, 2, };
}
private void ClearArrayItems()
{
SelectedIntArrayValues = Array.Empty<int>();
}
private int[] SelectedIntArrayValues { get; set; } = Array.Empty<int>();
private IEnumerable<string> SelectedArrayValues { get; set; } = Enumerable.Empty<string>();
private IEnumerable<EnumEducation> SelectedEnumValues { get; set; } = new List<EnumEducation> { EnumEducation.Middle, EnumEducation.Primary };
private List<SelectedItem>? SearchItemsSource { get; set; }
private IEnumerable<SelectedItem> OnSearch(string searchText)
{
Trace.Log($"{Localizer["Log1"]}：{searchText}");
SearchItemsSource ??= GenerateItems();
return SearchItemsSource.Where(i => i.Text.Contains(searchText, System.StringComparison.OrdinalIgnoreCase));
}
private Task OnSelectedItemsChanged8(IEnumerable<SelectedItem> items)
{
Trace2.Log($"选中项集合：{string.Join(",", items.Select(i => i.Value))}");
return Task.CompletedTask;
}
private Foo Model { get; set; } = new Foo();
private Foo Foo { get; set; } = new Foo();
private static void OnClickButton()
{
}
private string SelectedLongItemsValue1 { get; set; } = "";
private string SelectedLongItemsValue2 { get; set; } = "";
private string SelectedLongItemsValue3 { get; set; } = "";
private string SelectedMaxItemsValue { get; set; } = "";
private string SelectedMinItemsValue { get; set; } = "";
private string SelectedItemsValue { get; set; } = "Beijing";
private string SelectedItemsValue6 { get; set; } = "Beijing";
private string SelectedItemsValue7 { get; set; } = "Beijing";
private string SelectedItemsValue8 { get; set; } = "Beijing";
[NotNull]
private IEnumerable<SelectedItem>? TemplateItems { get; set; }
private IEnumerable<SelectedItem> GroupItems { get; } = new SelectedItem[]
{
new SelectedItem ("Jilin", "吉林") { GroupName = "东北"},
new SelectedItem ("Liaoning", "辽宁") {GroupName = "东北", Active = true },
new SelectedItem ("Beijing", "北京") { GroupName = "华中"},
new SelectedItem ("Shijiazhuang", "石家庄") { GroupName = "华中"},
new SelectedItem ("Shanghai", "上海") {GroupName = "华东", Active = true },
new SelectedItem ("Ningbo", "宁波") {GroupName = "华东", Active = true }
};
private List<SelectedItem> Items2 { get; set; } = new List<SelectedItem>();
private readonly List<SelectedItem> Items3 = new SelectedItem[]
{
new SelectedItem ("", "请选择 ..."),
new SelectedItem ("Beijing", "北京") { Active = true },
new SelectedItem ("Shanghai", "上海"),
new SelectedItem ("Hangzhou", "杭州")
}.ToList();
[NotNull]
private List<SelectedItem>? Items { get; set; }
[NotNull]
private List<SelectedItem>? Items21 { get; set; }
[NotNull]
private List<SelectedItem>? Items22 { get; set; }
[NotNull]
private List<SelectedItem>? Items23 { get; set; }
[NotNull]
private List<SelectedItem>? Items24 { get; set; }
[NotNull]
private List<SelectedItem>? Items25 { get; set; }
[NotNull]
private List<SelectedItem>? Items26 { get; set; }
[NotNull]
private List<SelectedItem>? Items27 { get; set; }
[NotNull]
private List<SelectedItem>? Items28 { get; set; }
[NotNull]
private List<SelectedItem>? Items4 { get; set; }
[NotNull]
private List<SelectedItem>? Items5 { get; set; }
[NotNull]
private List<SelectedItem>? Items6 { get; set; }
[NotNull]
private List<SelectedItem>? Items7 { get; set; }
[NotNull]
private List<SelectedItem>? Items8 { get; set; }
[NotNull]
private List<SelectedItem>? Items9 { get; set; }
[NotNull]
private List<SelectedItem>? Items10 { get; set; }
[NotNull]
private List<SelectedItem>? Items11 { get; set; }
[NotNull]
private List<SelectedItem>? LongItems { get; set; }
[NotNull]
private List<SelectedItem>? LongItems1 { get; set; }
[NotNull]
private List<SelectedItem>? LongItems2 { get; set; }
[NotNull]
private List<SelectedItem>? LongItems3 { get; set; }
[NotNull]
private List<SelectedItem>? LongItems4 { get; set; }
[NotNull]
private List<SelectedItem>? LongItems5 { get; set; }
/// <summary>
/// 获得事件方法
/// </summary>
/// <returns></returns>
private IEnumerable<EventItem> GetEvents() => new[]
{
new EventItem()
{
Name = "OnSelectedItemsChanged",
Description = Localizer["Event1"],
Type = "Func<SelectedItem, Task>"
},
new EventItem()
{
Name = "OnSearchTextChanged",
Description = Localizer["Event2"],
Type = "Func<string, IEnumerable<SelectedItem>>"
}
};
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new[]
{
// TODO: 移动到数据库中
new AttributeItem()
{
Name = "ShowLabel",
Description = Localizer["Att1"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem()
{
Name = "ShowCloseButton",
Description = Localizer["Att2"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem()
{
Name = "ShowToolbar",
Description = Localizer["Att3"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem()
{
Name = "ShowDefaultButtons",
Description = Localizer["Att4"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem()
{
Name = "DisplayText",
Description = Localizer["Att5"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "PlaceHolder",
Description = Localizer["Att6"],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["Att1DefaultValue"]!
},
new AttributeItem()
{
Name = "Class",
Description = Localizer["Att7"],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "Color",
Description = Localizer["Att8"],
Type = "Color",
ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
DefaultValue = "Primary"
},
new AttributeItem()
{
Name = "IsDisabled",
Description = Localizer["Att9"],
Type = "boolean",
ValueList = "true / false",
DefaultValue = "false"
},
new AttributeItem()
{
Name = "Items",
Description = Localizer["Att10"],
Type = "IEnumerable<SelectedItem>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "ButtonTemplate",
Description = Localizer["Att11"],
Type = "RenderFragment<IEnumerable<SelectedItem>>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "ItemTemplate",
Description = Localizer["ItemTemplate"],
Type = "RenderFragment<SelectedItem>",
ValueList = " — ",
DefaultValue = " — "
}
};
}
