Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Search 搜索框

用于数据搜索

基本用法

输入部分数据进行搜索

Demo

请输入 1234 获取智能提示

显示清空按钮

通过设置 ShowClearButton 参数控制是否显示清空按钮

Demo

Attributes

Loading...
@page "/searchs"

<h3>Search 搜索框</h3>

<h4>用于数据搜索</h4>

<Block Title="基本用法" Introduction="输入部分数据进行搜索">
    <p>请输入 <code>1234</code> 获取智能提示</p>
    <Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="搜索示例" Items="@Items" OnSearch="@OnSearch"></Search>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="显示清空按钮" Introduction="通过设置 <code>ShowClearButton</code> 参数控制是否显示清空按钮">
    <Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="搜索示例" ShowClearButton="true" Items="@Items" OnSearch="@OnSearch2" OnClear="@OnClear"></Search>
    <Logger @ref="Trace2" class="mt-3" />
</Block>

<AttributeTable Items="@GetAttributes()" />
// 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.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Searchs
    {
        private IEnumerable<string> Items => new string[] { "1", "12", "123", "1234" };

        [NotNull]
        private Logger? Trace { get; set; }

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

        private Task OnSearch(string searchText)
        {
            Trace.Log($"SearchText: {searchText}");
            return Task.CompletedTask;
        }

        private Task OnSearch2(string searchText)
        {
            Trace2.Log($"SearchText: {searchText}");
            return Task.CompletedTask;
        }

        private Task OnClear(string searchText)
        {
            Trace2.Log($"OnClear: {searchText}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ChildContent",
                Description = "内容",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Items",
                Description = "内容",
                Type = "IEnumerable<string>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "NoDataTip",
                Description = "自动完成数据无匹配项时提示信息",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "无匹配数据"
            },
            new AttributeItem() {
                Name = "ClearButtonIcon",
                Description = "清空按钮图标",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "fa fa-trash"
            },
            new AttributeItem() {
                Name = "ClearButtonText",
                Description = "清空按钮文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ClearButtonColor",
                Description = "清空按钮颜色",
                Type = "Color",
                ValueList = " — ",
                DefaultValue = "Secondary"
            },
            new AttributeItem() {
                Name = "SearchButtonColor",
                Description = "搜索按钮颜色",
                Type = "Color",
                ValueList = " — ",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "IsLikeMatch",
                Description = "是否开启模糊匹配",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem()
            {
                Name = "IgnoreCase",
                Description = "匹配时是否忽略大小写",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem()
            {
                Name = "ShowClearButton",
                Description = "是否显示清除按钮",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem()
            {
                Name="OnSearch",
                Description = "点击搜索时回调此委托",
                Type = "Func<string, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name="OnClear",
                Description = "点击清空时回调此委托",
                Type = "Func<string, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload