Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

MultiSelect 多项选择器

当进行多项选项时,使用下拉菜单展示并提供搜索多项选择内容

提供各种颜色的多选下拉框

Demo

绑定一个逗号字符串分割的字符串

Demo

MutltiSelect 组件数据源 Items选中值 SelectedItemsValue 均支持双向绑定;本例中通过双向绑定 SelectedItemsValue 变量,通过下拉框选择更改其值

Beijing

绑定一个泛型 IEnumerable 集合

Demo

本例中通过双向绑定 SelectedArrayValues 集合变量,通过下拉框选择更改其值

绑定一个数组 int[]

Demo

本例中通过双向绑定 SelectedIntArrayValues 数组变量,通过下拉框选择更改其值

绑定一个泛型 IEnumerable 集合

Demo

本例中通过双向绑定 SelectedEnumValues 集合变量,通过下拉框选择更改其值,枚举 类型时无需设置 Items 参数,额外功能是组件内部会尝试查找资源文件或者 DisplayAttributeDescriptionAttribute 标签尝试进行本地化翻译工作,如本例切换到 中文 时枚举值为 小学中学

Middel,Primary

通过设置 ShowSearch 值开启搜索功能

Demo

本例中设置搜索回调委托方法 OnSearchTextChanged 进行自定义搜索结果,如果未设置时内部使用显示文本进行模糊匹配

Beijing

通过设置 IsDisabled 值设置组件禁用状态

Demo

禁用状态时组件无任何响应

通过设置 OnSelectedItemsChanged 回调方法获取当前选中数据集合改变事件

Demo

下拉框未选择时,点击提交按钮时拦截。

Demo

内置到 ValidateForm 组件时,自动开启客户端验证功能,绑定模型拥有 Required 标签

组件双向绑定时会根据条件自动判断是否显示标签文字

Demo

前置标签显式规则与 BootstrapInput 组件一致 [传送门]

双向绑定显示标签
双向绑定不显示标签
自定义 DisplayText

候选项文字特别长

Demo

通过设置 ShowSelectAllButton 值设置组件显示全选与反选按钮

Demo

通过设置 Max Min 值设置组件可选项数量限制

Demo

最多可选择两个选项

最少选择两个选项

通过设置 ButtonTemplate 自定义工具栏按钮实现自定义功能

Demo

通过选择第一个下拉框不同选项,第二个下拉框动态填充内容。

Demo

本例中点击第一个下拉框,可以通过异步方法获取第二个多选框的数据源,进行赋值后,调用 StateHasChanged 进行对 多选框 重新渲染

Attributes

Loading...

Event

Loading...
@page "/multiselects"

<h3>MultiSelect 多项选择器</h3>

<h4>当进行多项选项时,使用下拉菜单展示并提供搜索多项选择内容</h4>

<Block Title="颜色" Introduction="提供各种颜色的多选下拉框">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Success" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Danger" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Warning" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Info" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Secondary" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Dark" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
    </div>
</Block>

<Block Title="双向绑定值字符串" Introduction="绑定一个逗号字符串分割的字符串">
    <p>
        <div><code>MutltiSelect</code> 组件数据源 <code>Items</code> 与 <b>选中值</b> <code>SelectedItemsValue</code> 均支持双向绑定;本例中通过双向绑定 <code>SelectedItemsValue</code> 变量,通过下拉框选择更改其值</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 fa-plus" Text="添加" OnClick="@AddItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="减少" OnClick="@RemoveItems"></Button>
            <Button Icon="fa fa-trash-o" Text="清空" OnClick="@ClearItems"></Button>
        </div>
    </div>
    <div class="mt-3">@SelectedItemsValue</div>
</Block>

<Block Title="双向绑定值集合" Introduction="绑定一个泛型 <code>IEnumerable<T></code> 集合">
    <p>本例中通过双向绑定 <code>SelectedArrayValues</code> 集合变量,通过下拉框选择更改其值</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items5" @bind-Value="@SelectedArrayValues"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-plus" Text="添加" OnClick="@AddListItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="减少" OnClick="@RemoveListItems"></Button>
            <Button Icon="fa fa-trash-o" Text="清空" OnClick="@ClearListItems"></Button>
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedArrayValues))</div>
</Block>

<Block Title="双向绑定值数组" Introduction="绑定一个数组 <code>int[]</code>">
    <p>本例中通过双向绑定 <code>SelectedIntArrayValues</code> 数组变量,通过下拉框选择更改其值</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 fa-plus" Text="添加" OnClick="@AddArrayItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="减少" OnClick="@RemoveArrayItems"></Button>
            <Button Icon="fa fa-trash-o" Text="清空" OnClick="@ClearArrayItems"></Button>
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedIntArrayValues))</div>
</Block>

<Block Title="双向绑定枚举集合" Introduction="绑定一个泛型 <code>IEnumerable<Enum></code> 集合">
    <p>本例中通过双向绑定 <code>SelectedEnumValues</code> 集合变量,通过下拉框选择更改其值,<b>枚举</b> 类型时无需设置 <code>Items</code> 参数,额外功能是组件内部会尝试查找资源文件或者 <code>DisplayAttribute</code> 与 <code>DescriptionAttribute</code> 标签尝试进行本地化翻译工作,如本例切换到 <b>中文</b> 时枚举值为 <b>小学</b> 与 <b>中学</b></p>
    <MultiSelect @bind-Value="@SelectedEnumValues"></MultiSelect>
    <div>@(string.Join(",", SelectedEnumValues))</div>
</Block>

<Block Title="搜索功能" Introduction="通过设置 <code>ShowSearch</code> 值开启搜索功能">
    <p>本例中设置搜索回调委托方法 <code>OnSearchTextChanged</code> 进行自定义搜索结果,如果未设置时内部使用显示文本进行模糊匹配</p>
    <MultiSelect Items="@Items6" @bind-Value="@SelectedItemsValue6" ShowSearch="true" OnSearchTextChanged="@OnSearch"></MultiSelect>
    <div>@SelectedItemsValue6</div>
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用功能" Introduction="通过设置 <code>IsDisabled</code> 值设置组件禁用状态">
    <p>禁用状态时组件无任何响应</p>
    <MultiSelect Items="@Items7" Value="@SelectedItemsValue7" IsDisabled="true" />
</Block>

<Block Title="选项改变时事件" Introduction="通过设置 <code>OnSelectedItemsChanged</code> 回调方法获取当前选中数据集合改变事件">
    <MultiSelect Items="@Items8" OnSelectedItemsChanged="@OnSelectedItemsChanged8" Value="@SelectedItemsValue8" />
    <BlockLogger @ref="Trace2" />
</Block>

<Block Title="客户端验证" Introduction="下拉框未选择时,点击提交按钮时拦截。">
    <p>内置到 <code>ValidateForm</code> 组件时,自动开启客户端验证功能,绑定模型拥有 <code>Required</code> 标签</p>
    <ValidateForm Model="@Model">
        <div class="row g-3">
            <div class="col-12 col-sm-8">
                <MultiSelect @bind-Value="@Model.Education" />
            </div>
            <div class="col-12 col-sm-4 align-self-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 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="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <MultiSelect Color="Color.Primary" Items="@Items10" @bind-Value="@Foo.Name" />
    <Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <MultiSelect Color="Color.Primary" Items="@Items11" @bind-Value="@Foo.Name" DisplayText="自定义姓名" ShowLabel="true" />
</Block>

<Block Title="选项超长文字" Introduction="候选项文字特别长">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems1" @bind-Value="@SelectedLongItemsValue1" DisplayText="超长文字" ShowLabel="true"></MultiSelect>
    </div>
</Block>

<Block Title="全选与反选按钮" Introduction="通过设置 <code>ShowSelectAllButton</code> 值设置组件显示全选与反选按钮">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems2" @bind-Value="@SelectedLongItemsValue2" 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="@LongItems3" @bind-Value="@SelectedMaxItemsValue" Max="2"></MultiSelect>
    </div>
    <div style="max-width: 300px" class="mt-3">
        <p>最少选择两个选项</p>
        <MultiSelect Items="@LongItems4" @bind-Value="@SelectedMinItemsValue" Min="2"></MultiSelect>
    </div>
</Block>

<Block Title="扩展工具栏按钮" Introduction="通过设置 <code>ButtonTemplate</code> 自定义工具栏按钮实现自定义功能">
    <div style="max-width: 300px">
        <MultiSelect Items="@LongItems5" @bind-Value="@SelectedLongItemsValue3" ShowToolbar="true" ShowDefaultButtons="false">
            <ButtonTemplate>
                <button class="btn" @onclick="@OnClickButton">测试</button>
            </ButtonTemplate>
        </MultiSelect>
    </div>
</Block>

<Block Title="级联绑定" Introduction="通过选择第一个下拉框不同选项,第二个下拉框动态填充内容。">
    <p>本例中点击第一个下拉框,可以通过异步方法获取第二个多选框的数据源,进行赋值后,调用 <code>StateHasChanged</code> 进行对 <b>多选框</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>
</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;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    ///
    /// </summary>
    public partial class MultiSelects
    {
        [NotNull]
        private BlockLogger? Trace { get; set; }

        [NotNull]
        private BlockLogger? Trace2 { get; set; }

        /// <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 = new int[0];
        }

        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.Middel, EnumEducation.Primary };

        private IEnumerable<SelectedItem> OnSearch(string searchText)
        {
            Trace.Log($"搜索文字:{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 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 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";

        private IEnumerable<SelectedItem> Items { get; set; } = new[] {
            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", "连云港")
        };

        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();

        private IEnumerable<SelectedItem> Items4 { get; set; } = new[] {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        private IEnumerable<SelectedItem> Items5 { get; set; } = new[] {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        private IEnumerable<SelectedItem> Items6 { get; set; } = new[] {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        private IEnumerable<SelectedItem> Items7 { get; set; } = new[] {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        private IEnumerable<SelectedItem> Items8 { get; set; } = new[] {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        private IEnumerable<SelectedItem> Items9 { get; set; } = new[] {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        private IEnumerable<SelectedItem> Items10 { get; set; } = new[] {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        private IEnumerable<SelectedItem> Items11 { get; set; } = new[] {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        private IEnumerable<SelectedItem> LongItems { get; set; } = new[]
        {
            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 IEnumerable<SelectedItem> LongItems1 { get; set; } = new[]
        {
            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 IEnumerable<SelectedItem> LongItems2 { get; set; } = new[]
        {
            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 IEnumerable<SelectedItem> LongItems3 { get; set; } = new[]
        {
            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 IEnumerable<SelectedItem> LongItems4 { get; set; } = new[]
        {
            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 IEnumerable<SelectedItem> LongItems5 { get; set; } = new[]
        {
            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", "特别甜的土瓜(特别甜的土瓜)"),
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EventItem> GetEvents() => new[]
        {
            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[]
        {
            // 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 = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload