Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Select 选择器

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

Select 下拉选择框

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

Demo

Select 禁用下拉框

选择器不可用状态

Demo

Select 双向绑定

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

Demo

Select 级联绑定

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

Demo

Select 客户端验证

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

Demo

分组

备选项进行分组展示

Demo

绑定泛型为 Guid 结构

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

Demo
4498a43b-b031-4b73-a873-3395e514553f

显示标签

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

Demo

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

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

静态数据

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

Demo

枚举数据

Select 组件绑定枚举类型示例

Demo

本次展现的是通过 Select 组件绑定枚举类型 EnumEducation,通过选项的更改绑定数据

Primary

绑定可为空类型

Select 组件绑定 int? 类型示例

Demo

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

null

绑定可为空布尔类型

Select 组件绑定 bool? 类型示例

Demo

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

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

null

自定义选项模板

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

Demo

带搜索框的下拉框

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

Demo

Attributes

Loading...

事件 Events

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

<h3>Select 选择器</h3>

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

<Block Title="Select 下拉选择框" Introduction="提供各种颜色的下拉选择框">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Primary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Success" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Danger" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Warning" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Info" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Secondary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Dark" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Select>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="Select 禁用下拉框" Introduction="选择器不可用状态">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Primary" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Success" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Danger" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Warning" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Info" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Secondary" Items="@Items" IsDisabled="true"></Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Color="Color.Dark" Items="@Items" IsDisabled="true"></Select>
            </div>
        </div>
    </div>
</Block>

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

<Block Title="Select 级联绑定" Introduction="通过选择第一个下拉框不同选项,第二个下拉框动态填充内容。">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Items="@Items3" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select @ref="Select2" TValue="string" Items="@Items2" />
            </div>
            <div class="form-group col-12">
                <Button Text="弹窗中级联示例" OnClickWithoutRender="@OnShowDialog" />
            </div>
        </div>
    </div>
</Block>

<Block Title="Select 客户端验证" Introduction="下拉框未选择时,点击提交按钮时拦截。">
    <ValidateForm class="form-inline" Model="@BindModel">
        <div class="row">
            <div class="form-group 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="form-group col-12 col-sm-6 align-items-end">
                <Button ButtonType="ButtonType.Submit">提交</Button>
            </div>
        </div>
    </ValidateForm>
</Block>

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

<Block Title="绑定泛型为 Guid 结构" Introduction="组件绑定值为 Guid 结构体示例">
    <div class="row">
        <div class="form-group col-12 col-sm-3">
            <Select Color="Color.Primary" Items="@GuidItems" @bind-Value="@CurrentGuid" />
        </div>
        <div class="form-group col-12 col-sm-9">
            <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 class="form-inline" Model="@Model">
        <div class="row">
            <div class="form-group 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="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Select Color="Color.Primary" Items="@Items" @bind-Value="@Model.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">
                <Select Color="Color.Primary" Items="@Items" @bind-Value="@Model.Name" DisplayText="自定义城市" ShowLabel="true" />
            </div>
        </div>
    </div>
</Block>

<Block Title="静态数据" Introduction="直接在 <code>Select</code> 组件内部进行硬编码书写,适用于静态数据下拉框">
    <div class="form-inline">
        <div class="row">
            <div class="form-group 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>
    </div>
</Block>

<Block Title="枚举数据" Introduction="<code>Select</code> 组件绑定枚举类型示例">
    <p>本次展现的是通过 <code>Select</code> 组件绑定枚举类型 <code>EnumEducation</code>,通过选项的更改绑定数据</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select  @bind-Value="@SelectedEnumItem">
                </Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <div class="form-control">@SelectedEnumItem</div>
            </div>
        </div>
    </div>
</Block>

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

<Block Title="自定义选项模板" Introduction="通过设置 <code>ItemTemplate</code> 可以自定义选项渲染样式">
    <div class="form-inline">
        <div class="row">
            <div class="form-group 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>
    </div>
</Block>

<Block Title="带搜索框的下拉框" Introduction="通过设置 <code>ShowSearchBox</code> 属性控制是否显示搜索框,默认为 false 不显示搜索框">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Items="@Items" ShowSearch="true" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select TValue="string" Items="@StringItems" ShowSearch="true" />
            </div>
        </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.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 Logger? Trace { get; set; }

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

        /// <summary>
        /// 获得 默认数据集合
        /// </summary>
        private readonly IEnumerable<SelectedItem> StringItems = new SelectedItem[]
        {
            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");
            return Task.CompletedTask;
        }

        private Select<string>? Select2 { get; set; }

        /// <summary>
        /// 级联绑定菜单
        /// </summary>
        /// <param name="item"></param>
        private Task OnCascadeBindSelectClick(SelectedItem item)
        {
            _item2.Clear();
            if (item.Value == "Beijing")
            {
                _item2.AddRange(new SelectedItem[]
                {
                    new SelectedItem("1","朝阳区"),
                    new SelectedItem("2","海淀区"),
                });
            }
            else if (item.Value == "Shanghai")
            {
                _item2.AddRange(new SelectedItem[]
                {
                    new SelectedItem("1","静安区"),
                    new SelectedItem("2","黄浦区"),
                });
            }
            Select2?.SetItems(_item2);
            return Task.CompletedTask;
        }

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

        private readonly List<SelectedItem> _item2 = new List<SelectedItem>();

        private IEnumerable<SelectedItem> Items2 => _item2;

        private IEnumerable<SelectedItem> EnumItems { get; set; } = typeof(SortOrder).ToSelectList();

        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 EnumEducation SelectedEnumItem { get; set; } = EnumEducation.Primary;

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

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

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload