logoEnterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
coverage

MultiSelect

When you have multiple options, use the drop-down menu to present and provide a search for multiple choices

Multi-select drop-down boxes in a variety of colors are available

Demo

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

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

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

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

Middle,Primary

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

Alternatives are presented in groups

Demo

Set the component disabled state by setting the IsDisabled value

Demo

The component does not respond when the state is disabled

Get the currently selected data set change event by setting the onSelectedItemsChanged callback method by setting

Demo

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

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

The candidate text is particularly long

Demo

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 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

Customize features by setting ButtonTemplate custom toolbar buttons

Demo

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

customer item template by set ItemTemplate

Demo

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 = " — "
        }
    };
}

B station related video link

No

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
img
Themes
Bootstrap
Motronic
Ant Design (完善中)
DevUI (制作中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor Component library updated to 7.0.8-beta05

Bootstrap Blazor at present has more than 120 components. This component is based on Bootstrap Blazor An enterprise-level component library that provides several types of common components such as layout, navigation, form, data, notification, icon, voice, etc. Each component has been carefully designed with modularity, responsiveness and excellent performance. Starting from more practical scenarios, meeting the needs of various scenarios, greatly reducing the time cost of developers, greatly shortening the development cycle, greatly improving development efficiency, and providing a set of General Rights Management System Example project。Bootstrap Blazor Products are maintained by a professional full-time technical team, with efficient response speed, diversified solutions, long-term support, and enterprise-level support. At present, it has been used in many well-known state-owned enterprises, and the project is running stably with a maximum of 1200 people online. On the right is the QR code of the Chinese Blazor QQ community with the largest number of people in China, welcome to scan and join the group.

component updated to 6.6.0 Change log [portal] If the component brings you convenience, please help to light up the project Star github gitee

QQGroup
QQ 795206915