
MultiSelect 多项选择器
当进行多项选项时,使用下拉菜单展示并提供搜索多项选择内容
颜色
提供各种颜色的多选下拉框
Demo
双向绑定值字符串
绑定一个逗号字符串分割的字符串
Demo
本例中通过双向绑定 SelectedItemsValue
变量,通过下拉框选择更改其值
Beijing,Chengdu
双向绑定值集合
绑定一个泛型 IEnumerable
集合
Demo
本例中通过双向绑定 SelectedArrayValues
集合变量,通过下拉框选择更改其值
双向绑定枚举集合
绑定一个泛型 IEnumerable
集合
Demo
本例中通过双向绑定 SelectedEnumValues
集合变量,通过下拉框选择更改其值
Middel,Primary
搜索功能
通过设置 ShowSearch
值开启搜索功能
Demo
本例中设置搜索回调委托方法 OnSearchTextChanged
进行自定义搜索结果,如果未设置时内部使用显示文本进行模糊匹配
Beijing,Chengdu
禁用功能
通过设置 IsDisabled
值设置组件禁用状态
Demo
禁用状态时组件无任何响应
Beijing,Chengdu
选项改变时事件
通过设置 IsDisabled
值设置组件禁用状态
Demo
客户端验证
下拉框未选择时,点击提交按钮时拦截。
Demo
内置到 ValidateForm
组件时,自动开启客户端验证功能,绑定模型拥有 Required
标签
显示标签
组件双向绑定时会根据条件自动判断是否显示标签文字
Demo
选项超长文字
候选项文字特别长
Demo
全选与反选按钮
通过设置 ShowSelectAllButton
值设置组件显示全选与反选按钮
Demo
设置选项最大数与最小数
通过设置 Max
Min
值设置组件可选项数量限制
Demo
最多可选择两个选项
最少选择两个选项
扩展工具栏按钮
通过设置 ButtonTemplate
自定义工具栏按钮实现自定义功能
Demo
Attributes
Loading...
事件 Events
Loading...
@page "/multiselects"
<h3>MultiSelect 多项选择器</h3>
<h4>当进行多项选项时,使用下拉菜单展示并提供搜索多项选择内容</h4>
<Block Title="颜色" Introduction="提供各种颜色的多选下拉框">
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<MultiSelect TValue="string" Items="@Items"></MultiSelect>
</div>
<div class="form-group col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Primary" Items="@Items"></MultiSelect>
</div>
<div class="form-group col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Success" Items="@Items"></MultiSelect>
</div>
<div class="form-group col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Danger" Items="@Items"></MultiSelect>
</div>
<div class="form-group col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Warning" Items="@Items"></MultiSelect>
</div>
<div class="form-group col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Info" Items="@Items"></MultiSelect>
</div>
<div class="form-group col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Secondary" Items="@Items"></MultiSelect>
</div>
<div class="form-group col-12 col-sm-6">
<MultiSelect TValue="string" Color="Color.Dark" Items="@Items"></MultiSelect>
</div>
</div>
</div>
</Block>
<Block Title="双向绑定值字符串" Introduction="绑定一个逗号字符串分割的字符串">
<p>本例中通过双向绑定 <code>SelectedItemsValue</code> 变量,通过下拉框选择更改其值</p>
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue"></MultiSelect>
</div>
<div class="form-group col-12 col-sm-6">
<Button Icon="fa fa-plus" Text="添加" OnClick="@AddItems" class="mr-1"></Button>
<Button Icon="fa fa-minus" Text="减少" OnClick="@RemoveItems"></Button>
</div>
</div>
</div>
<div>@SelectedItemsValue</div>
</Block>
<Block Title="双向绑定值集合" Introduction="绑定一个泛型 <code>IEnumerable<T></code> 集合">
<p>本例中通过双向绑定 <code>SelectedArrayValues</code> 集合变量,通过下拉框选择更改其值</p>
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<MultiSelect Items="@Items" @bind-Value="@SelectedArrayValues"></MultiSelect>
</div>
<div class="form-group col-12 col-sm-6">
<Button Icon="fa fa-plus" Text="添加" OnClick="@AddListItems" class="mr-1"></Button>
<Button Icon="fa fa-minus" Text="减少" OnClick="@RemoveListItems"></Button>
</div>
</div>
</div>
<div class="mt-3">@(string.Join(",", SelectedArrayValues))</div>
</Block>
<Block Title="双向绑定枚举集合" Introduction="绑定一个泛型 <code>IEnumerable<Enum></code> 集合">
<p>本例中通过双向绑定 <code>SelectedEnumValues</code> 集合变量,通过下拉框选择更改其值</p>
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<MultiSelect @bind-Value="@SelectedEnumValues"></MultiSelect>
</div>
</div>
</div>
<div>@(string.Join(",", SelectedEnumValues))</div>
</Block>
<Block Title="搜索功能" Introduction="通过设置 <code>ShowSearch</code> 值开启搜索功能">
<p>本例中设置搜索回调委托方法 <code>OnSearchTextChanged</code> 进行自定义搜索结果,如果未设置时内部使用显示文本进行模糊匹配</p>
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue" ShowSearch="true" OnSearchTextChanged="@OnSearch"></MultiSelect>
</div>
</div>
</div>
<div>@SelectedItemsValue</div>
<Logger @ref="Trace" class="mt-3" />
</Block>
<Block Title="禁用功能" Introduction="通过设置 <code>IsDisabled</code> 值设置组件禁用状态">
<p>禁用状态时组件无任何响应</p>
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue" IsDisabled="true" />
</div>
</div>
</div>
<div>@SelectedItemsValue</div>
<Logger @ref="Trace" class="mt-3" />
</Block>
<Block Title="选项改变时事件" Introduction="通过设置 <code>IsDisabled</code> 值设置组件禁用状态">
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue" OnSelectedItemsChanged="@OnSelectedItemsChanged" />
</div>
</div>
</div>
<Logger @ref="Trace" />
</Block>
<Block Title="客户端验证" Introduction="下拉框未选择时,点击提交按钮时拦截。">
<p>内置到 <code>ValidateForm</code> 组件时,自动开启客户端验证功能,绑定模型拥有 <code>Required</code> 标签</p>
<ValidateForm class="form-inline" Model="@Model">
<div class="row">
<div class="form-group col-12 col-sm-8">
<MultiSelect @bind-Value="@Model.Education" />
</div>
<div class="form-group col-12 col-sm-4 align-items-end">
<Button ButtonType="ButtonType.Submit">提交</Button>
</div>
</div>
</ValidateForm>
</Block>
<Block Title="显示标签" Introduction="组件双向绑定时会根据条件自动判断是否显示标签文字">
<p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
<Divider Text="双向绑定显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
<ValidateForm class="form-inline" Model="@Foo">
<div class="row">
<div class="form-group col-12">
<MultiSelect Color="Color.Primary" Items="@Items" @bind-Value="@Foo.Name" />
</div>
</div>
</ValidateForm>
<Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<MultiSelect Color="Color.Primary" Items="@Items" @bind-Value="@Foo.Name" />
</div>
</div>
</div>
<Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<MultiSelect Color="Color.Primary" Items="@Items" @bind-Value="@Foo.Name" DisplayText="自定义姓名" ShowLabel="true" />
</div>
</div>
</div>
</Block>
<Block Title="选项超长文字" Introduction="候选项文字特别长">
<div style="max-width: 400px">
<MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue" DisplayText="超长文字" ShowLabel="true"></MultiSelect>
</div>
</Block>
<Block Title="全选与反选按钮" Introduction="通过设置 <code>ShowSelectAllButton</code> 值设置组件显示全选与反选按钮">
<div style="max-width: 400px">
<MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue" ShowToolbar="true" ShowSearch="true"></MultiSelect>
</div>
</Block>
<Block Title="设置选项最大数与最小数" Introduction="通过设置 <code>Max</code> <code>Min</code> 值设置组件可选项数量限制">
<div style="max-width: 300px">
<p>最多可选择两个选项</p>
<MultiSelect Items="@LongItems" @bind-Value="@SelectedMaxItemsValue" Max="2"></MultiSelect>
</div>
<div style="max-width: 300px" class="mt-3">
<p>最少选择两个选项</p>
<MultiSelect Items="@LongItems" @bind-Value="@SelectedMinItemsValue" Min="2"></MultiSelect>
</div>
</Block>
<Block Title="扩展工具栏按钮" Introduction="通过设置 <code>ButtonTemplate</code> 自定义工具栏按钮实现自定义功能">
<div style="max-width: 300px">
<MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue" ShowToolbar="true" ShowDefaultButtons="false">
<ButtonTemplate>
<button class="btn" @onclick="@OnClickButton">测试</button>
</ButtonTemplate>
</MultiSelect>
</div>
</Block>
<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/
using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Foo = BootstrapBlazor.Shared.Pages.Components.Foo;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public partial class MultiSelects
{
/// <summary>
/// 获得/设置 Logger 实例
/// </summary>
private Logger? Trace { get; set; }
/// <summary>
/// 获得 默认数据集合
/// </summary>
private readonly IEnumerable<SelectedItem> Items = new SelectedItem[]
{
new SelectedItem ("Beijing", "北京"),
new SelectedItem ("Shanghai", "上海"),
new SelectedItem ("Guangzhou", "广州"),
new SelectedItem ("Shenzhen", "深圳"),
new SelectedItem ("Chengdu", "成都"),
new SelectedItem ("Wuhan", "武汉"),
new SelectedItem ("Dalian", "大连"),
new SelectedItem ("Hangzhou", "杭州"),
new SelectedItem ("Lianyungang", "连云港"),
};
/// <summary>
/// 获得 默认数据集合
/// </summary>
private readonly IEnumerable<SelectedItem> LongItems = new 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", "特别甜的土瓜(特别甜的土瓜)"),
};
private string SelectedLongItemsValue { get; set; } = "";
private string SelectedMaxItemsValue { get; set; } = "";
private string SelectedMinItemsValue { get; set; } = "";
private string SelectedItemsValue { get; set; } = "Beijing,Chengdu";
private void AddItems()
{
SelectedItemsValue = "Beijing,Chengdu,Hangzhou,Lianyungang";
}
private void RemoveItems()
{
SelectedItemsValue = "Beijing,Chengdu";
}
private void AddListItems()
{
SelectedArrayValues = "Beijing,Chengdu,Hangzhou,Lianyungang".Split(',');
}
private void RemoveListItems()
{
SelectedArrayValues = "Beijing,Chengdu".Split(',');
}
private IEnumerable<string> SelectedArrayValues { get; set; } = Enumerable.Empty<string>();
private IEnumerable<EnumEducation> SelectedEnumValues { get; set; } = new List<EnumEducation> { EnumEducation.Middel, EnumEducation.Primary };
private IEnumerable<SelectedItem> OnSearch(string searchText)
{
return Items.Where(i => i.Text.Contains(searchText, System.StringComparison.OrdinalIgnoreCase));
}
private Task OnSelectedItemsChanged(IEnumerable<SelectedItem> items)
{
Trace?.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 void OnClickButton()
{
}
/// <summary>
/// 获得事件方法
/// </summary>
/// <returns></returns>
private static IEnumerable<EventItem> GetEvents() => new EventItem[]
{
new EventItem()
{
Name = "OnSelectedItemChanged",
Description="下拉框选项改变时触发此事件",
Type ="Func<SelectedItem, Task>"
},
new EventItem()
{
Name = "OnSearchTextChanged",
Description="搜索文本发生变化时回调此方法",
Type ="Func<string, IEnumerable<SelectedItem>>"
}
};
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "ShowLabel",
Description = "是否显示前置标签",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = "ShowCloseButton",
Description = "是否显示前置标签关闭按钮",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = "ShowToolbar",
Description = "是否显示功能按钮",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "ShowDefaultButtons",
Description = "是否显示默认功能按钮",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = "DisplayText",
Description = "前置标签显示文本",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "PlaceHolder",
Description = "未选择时的占位显示文字",
Type = "string",
ValueList = " — ",
DefaultValue = "点击进行多选 ..."
},
new AttributeItem() {
Name = "Class",
Description = "样式",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Color",
Description = "颜色",
Type = "Color",
ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
DefaultValue = "Primary"
},
new AttributeItem() {
Name = "IsDisabled",
Description = "是否禁用",
Type = "boolean",
ValueList = "true / false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "Items",
Description = "数据集合",
Type = "IEnumerable<SelectedItem>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "ButtonTemplate",
Description = "扩展按钮模板",
Type = "RenderFragment<IEnumerable<SelectedItem>>",
ValueList = " — ",
DefaultValue = " — "
}
};
}
}