Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Select 选择器

当选项过多时,使用下拉菜单展示并选择内容

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

Demo

本例中,第一个下拉框没有进行 Value 双向绑定,所以选择不同选项时仅自己变化,其余下拉框共用同一数据源 Items 并且双向绑定 Value 值,选择不同选项时一同变化

选择器不可用状态

Demo

下拉框内选项 禁用 示例

通过 Select 组件绑定 Model.Name 属性,改变下拉框选项时,文本框内的数值随之改变。

Demo

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

Demo

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

Demo

备选项进行分组展示

Demo

组件绑定值为 Guid 结构体示例

Demo
00000000-0000-0000-0000-000000000000

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

Demo

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

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

直接在 Select 组件内部进行硬编码书写,适用于静态数据下拉框

Demo

Select 组件绑定枚举类型示例

Demo

当绑定值为可为空枚举类型时,组件内部自动通过 PlaceHolder 值添加首选项,未设置 PlaceHolder 值时,使用资源文件中的 请选择 ... 作为首选项,本示例绑定 EnumEducation 枚举类型

绑定值为枚举类型时,设置 PalceHolder 无效

Primary

Select 组件绑定 int? 类型示例

Demo

选中第一个选项时,绑定值 SelectedIntItemnull

null

Select 组件绑定 bool? 类型示例

Demo

可为空布尔类型多用于条件搜索框中

选中第一个选项时,绑定值 SelectedIntItemnull

null

通过设置 ItemTemplate 可以自定义选项渲染样式

Demo

通过设置 ShowSearchBox 属性控制是否显示搜索框,默认为 false 不显示搜索框

Demo

通过设置 OnBeforeSelectedItemChange 委托,阻止当前值的改变

Demo

Attributes

Loading...

Event

Loading...
@page "/selects"
@inject DialogService Dialog

<h3>Select 选择器</h3>

<h4>当选项过多时,使用下拉菜单展示并选择内容</h4>

<Block Title="Select 下拉选择框" Introduction="提供各种颜色的下拉选择框">
    <p>本例中,第一个下拉框没有进行 <code>Value</code> 双向绑定,所以选择不同选项时仅自己变化,其余下拉框共用同一数据源 <code>Items</code> 并且双向绑定 <code>Value</code> 值,选择不同选项时一同变化</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Primary" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Success" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Danger" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Warning" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Info" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Secondary" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Dark" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="Select 禁用下拉框" Introduction="选择器不可用状态">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Primary" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Success" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Danger" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Warning" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Info" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Secondary" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Dark" Items="Items" IsDisabled="true"></Select>
        </div>
    </div>
    <p class="mt-3">下拉框内选项 <b>禁用</b> 示例</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items4" />
        </div>
    </div>
</Block>

<Block Title="Select 双向绑定" Introduction="通过 <code>Select</code> 组件绑定 <code>Model.Name</code> 属性,改变下拉框选项时,文本框内的数值随之改变。">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput readonly @bind-Value="Model.Name" />
        </div>
    </div>
</Block>

<Block Title="Select 级联绑定" Introduction="通过选择第一个下拉框不同选项,第二个下拉框动态填充内容。">
    <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">
            <Select TValue="string" Items="Items2" />
        </div>
        <div class="col-12">
            <Button Text="弹窗中级联示例" OnClickWithoutRender="OnShowDialog" />
        </div>
    </div>
</Block>

<Block Title="Select 客户端验证" Introduction="下拉框未选择时,点击提交按钮时拦截。">
    <ValidateForm Model="BindModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <Select @bind-Value="BindModel.Name">
                    <Options>
                        <SelectOption Text="请选择 ..." Value="" />
                        <SelectOption Text="北京" Value="1" />
                        <SelectOption Text="上海" Value="2" />
                        <SelectOption Text="广州" Value="3" />
                    </Options>
                </Select>
            </div>
            <div class="col-12 col-sm-6 align-self-end">
                <Button ButtonType="ButtonType.Submit">提交</Button>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="分组" Introduction="备选项进行分组展示">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Primary" Items="GroupItems">
            </Select>
        </div>
    </div>
</Block>

<Block Title="绑定泛型为 Guid 结构" Introduction="组件绑定值为 Guid 结构体示例">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Color="Color.Primary" Items="GuidItems" @bind-Value="CurrentGuid" />
        </div>
        <div class="col-12 col-sm-6">
            <div class="form-control">@CurrentGuid</div>
        </div>
    </div>
</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="Model">
        <div class="row g-3">
            <div class="col-12">
                <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name" />
            </div>
        </div>
    </ValidateForm>
    <Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <div class="row g-3">
        <div class="col-12">
            <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name" />
        </div>
    </div>
    <Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <div class="row g-3">
        <div class="col-12">
            <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name" DisplayText="自定义城市" ShowLabel="true" />
        </div>
    </div>
</Block>

<Block Title="静态数据" Introduction="直接在 <code>Select</code> 组件内部进行硬编码书写,适用于静态数据下拉框">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string">
                <Options>
                    <SelectOption Text="北京" Value="1" />
                    <SelectOption Text="上海" Value="2" Active="true" />
                    <SelectOption Text="广州" Value="3" />
                </Options>
            </Select>
        </div>
    </div>
</Block>

<Block Title="枚举数据" Introduction="<code>Select</code> 组件绑定枚举类型示例">
    <p>当绑定值为可为空枚举类型时,组件内部自动通过 <code>PlaceHolder</code> 值添加首选项,未设置 <code>PlaceHolder</code> 值时,使用资源文件中的 <b>请选择 ...</b> 作为首选项,本示例绑定 <code>EnumEducation</code> 枚举类型</p>
    <p>绑定值为枚举类型时,设置 <code>PalceHolder</code> 无效</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select @bind-Value="SelectedEnumItem1" PlaceHolder="@Localizer["PlaceHolder"]" ShowLabel="true" DisplayText="可为空">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select @bind-Value="SelectedEnumItem1" ShowLabel="true" DisplayText="可为空">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select @bind-Value="SelectedEnumItem" ShowLabel="true" DisplayText="不为空">
            </Select>
        </div>
        <div class="col-12 col-sm-6 align-self-end">
            <div class="form-control">@SelectedEnumItem</div>
        </div>
    </div>
</Block>

<Block Title="绑定可为空类型" Introduction="<code>Select</code> 组件绑定 <code>int?</code> 类型示例">
    <p>选中第一个选项时,绑定值 <code>SelectedIntItem</code> 为 <code>null</code></p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Items="NullableIntItems" @bind-Value="SelectedIntItem">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <div class="form-control">@GetSelectedIntItemString()</div>
        </div>
    </div>
</Block>

<Block Title="绑定可为空布尔类型" Introduction="<code>Select</code> 组件绑定 <code>bool?</code> 类型示例">
    <p>可为空布尔类型多用于条件搜索框中</p>
    <p>选中第一个选项时,绑定值 <code>SelectedIntItem</code> 为 <code>null</code></p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Items="NullableBoolItems" @bind-Value="SelectedBoolItem">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <div class="form-control">@GetSelectedBoolItemString()</div>
        </div>
    </div>
</Block>

<Block Title="自定义选项模板" Introduction="通过设置 <code>ItemTemplate</code> 可以自定义选项渲染样式">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items">
                <ItemTemplate>
                    <div class="dropdown-item-demo">
                        <i class="fa fa-fa"></i>
                        <span>@context.Text</span>
                        <i class="fa fa-star"></i>
                    </div>
                </ItemTemplate>
            </Select>
        </div>
    </div>
</Block>

<Block Title="带搜索框的下拉框" Introduction="通过设置 <code>ShowSearchBox</code> 属性控制是否显示搜索框,默认为 false 不显示搜索框">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items" ShowSearch="true" />
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="StringItems" ShowSearch="true" />
        </div>
    </div>
</Block>

<Block Title="带确认的下拉框" Introduction="通过设置 <code>OnBeforeSelectedItemChange</code> 委托,阻止当前值的改变">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items" OnBeforeSelectedItemChange="@OnBeforeSelectedItemChange"
                    SwalTitle="下拉框值变更" SwalContent="您确认要改变选项值吗?" SwalFooter="点击确认改变选项值,选择取消后值不变" />
        </div>
    </div>
</Block>

<SweetAlert />

<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 Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 下拉框操作类
    /// </summary>
    public sealed partial class Selects
    {
        /// <summary>
        ///
        /// </summary>
        private Foo Model { get; set; } = new Foo();

        /// <summary>
        ///
        /// </summary>
        private Foo BindModel { get; set; } = new Foo() { Name = "" };

        /// <summary>
        /// 获得/设置 Logger 实例
        /// </summary>
        private BlockLogger? Trace { get; set; }

        [Inject]
        [NotNull]
        private IStringLocalizer<Selects>? Localizer { get; set; }

        /// <summary>
        /// 获得 默认数据集合
        /// </summary>
        private IEnumerable<SelectedItem> Items { get; set; } = new[]
        {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海") { Active = true },
        };

        /// <summary>
        /// 获得 默认数据集合
        /// </summary>
        private readonly IEnumerable<SelectedItem> Items4 = new[]
        {
            new SelectedItem ("Beijing", "北京") { IsDisabled = true},
            new SelectedItem ("Shanghai", "上海") { Active = true },
            new SelectedItem ("Guangzhou", "广州")
        };

        /// <summary>
        /// 获得 默认数据集合
        /// </summary>
        private readonly IEnumerable<SelectedItem> StringItems = new[]
        {
            new SelectedItem ("1", "1"),
            new SelectedItem ("12", "12"),
            new SelectedItem ("123", "123"),
            new SelectedItem ("1234", "1234"),
            new SelectedItem ("a", "a"),
            new SelectedItem ("ab", "ab"),
            new SelectedItem ("abc", "abc"),
            new SelectedItem ("abcd", "abcd"),
            new SelectedItem ("abcde", "abcde")
        };

        /// <summary>
        /// 获得 默认数据集合
        /// </summary>
        private readonly IEnumerable<SelectedItem> Items3 = new SelectedItem[]
        {
            new SelectedItem ("", "请选择 ..."),
            new SelectedItem ("Beijing", "北京") { Active = true },
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Hangzhou", "杭州")
        };

        private readonly IEnumerable<SelectedItem> GroupItems = 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 Guid CurrentGuid { get; set; }

        private readonly IEnumerable<SelectedItem> GuidItems = new SelectedItem[]
        {
            new SelectedItem(Guid.NewGuid().ToString(), "Guid1"),
            new SelectedItem(Guid.NewGuid().ToString(), "Guid2")
        };

        /// <summary>
        /// 下拉选项改变时调用此方法
        /// </summary>
        /// <param name="item"></param>
        private Task OnItemChanged(SelectedItem item)
        {
            Trace?.Log($"SelectedItem Text: {item.Text} Value: {item.Value} Selected");
            StateHasChanged();
            return Task.CompletedTask;
        }

        /// <summary>
        /// 级联绑定菜单
        /// </summary>
        /// <param name="item"></param>
        private async Task OnCascadeBindSelectClick(SelectedItem item)
        {
            // 模拟异步通讯切换线程
            await Task.Delay(10);
            if (item.Value == "Beijing")
            {
                Items2 = new SelectedItem[]
                {
                    new SelectedItem("1","朝阳区") { Active = true},
                    new SelectedItem("2","海淀区"),
                };
            }
            else if (item.Value == "Shanghai")
            {
                Items2 = new SelectedItem[]
                {
                    new SelectedItem("1","静安区"),
                    new SelectedItem("2","黄浦区") { Active = true } ,
                };
            }
            else
            {
                Items2 = Enumerable.Empty<SelectedItem>();
            }
            StateHasChanged();
        }

        private Task OnShowDialog() => Dialog.Show(new DialogOption()
        {
            Title = "弹窗中使用级联下拉框",
            Component = BootstrapDynamicComponent.CreateComponent<CustomerSelectDialog>()
        });

        private IEnumerable<SelectedItem>? Items2 { get; set; }

        private IEnumerable<SelectedItem> NullableIntItems { get; set; } = new SelectedItem[]
        {
            new SelectedItem() { Text = "Item 1", Value = "" },
            new SelectedItem() { Text = "Item 2", Value = "2" },
            new SelectedItem() { Text = "Item 3", Value = "3" }
        };

        private int? SelectedIntItem { get; set; }

        private string GetSelectedIntItemString()
        {
            return SelectedIntItem.HasValue ? SelectedIntItem.Value.ToString() : "null";
        }

        private IEnumerable<SelectedItem> NullableBoolItems { get; set; } = new SelectedItem[]
        {
            new SelectedItem() { Text = "空值", Value = "" },
            new SelectedItem() { Text = "True 值", Value = "true" },
            new SelectedItem() { Text = "False 值", Value = "false" }
        };

        private bool? SelectedBoolItem { get; set; }

        private string GetSelectedBoolItemString()
        {
            return SelectedBoolItem.HasValue ? SelectedBoolItem.Value.ToString() : "null";
        }

        private Task<bool> OnBeforeSelectedItemChange(SelectedItem item)
        {
            return Task.FromResult(true);
        }

        private EnumEducation SelectedEnumItem { get; set; } = EnumEducation.Primary;

        private EnumEducation? SelectedEnumItem1 { get; set; }

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnSelectedItemChanged",
                Description="下拉框选项改变时触发此事件",
                Type ="Func<SelectedItem, Task>"
            },
            new EventItem()
            {
                Name = "OnBeforeSelectedItemChange",
                Description="下拉框选项改变前触发此事件",
                Type ="Func<SelectedItem, Task<bool>>"
            }
        };

        /// <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 = "ShowSearch",
                Description = "是否显示搜索框",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "DisplayText",
                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 = "SelectItems",
                Description = "静态数据模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ItemTemplate",
                Description = "数据选项模板",
                Type = "RenderFragment<SelectedItem>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = "数据模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Category",
                Description = "对话框图标",
                Type = "SwalCategory",
                ValueList = " — ",
                DefaultValue = " SwalCategory.Information "
            },
            new AttributeItem() {
                Name = "Content",
                Description = "对话框内容",
                Type = "string?",
                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