Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Search box

Used for data search

Basic usage

Enter some of the data to search

Demo

Please enter 1234 to get the Smart Prompt and turn on auto focus by setting IsAutoFocus='true'

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Searchs> Localizer

<Search IgnoreCase="true"
        IsLikeMatch="true"
        IsAutoFocus="true"
        PlaceHolder="@Localizer["SearchsPlaceHolder"]"
        Items="@Items"
        OnSearch="@OnSearch"
        IsSelectAllTextOnFocus="true" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private static IEnumerable<string> Items => new string[] { "1", "12", "123", "1234" };

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

Values are automatically emptied after searching

Turn on the automatic emptying of the search box after search by setting IsAutoClearAfterSearch="true"

Demo

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Searchs> Localizer

<Search IgnoreCase="true"
        IsLikeMatch="true"
        IsAutoClearAfterSearch="true"
        PlaceHolder="@Localizer["SearchsPlaceHolder"]"
        Items="@Items"
        OnSearch="@OnSearch"/>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private static IEnumerable<string> Items => new string[] { "1", "12", "123", "1234" };

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

The Empty button is displayed

Control whether the Empty button is displayed by setting the ShowClearButton parameter

Demo

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Searchs> Localizer

<Search IgnoreCase="true"
        IsLikeMatch="true"
        PlaceHolder="@Localizer["SearchsPlaceHolder"]"
        ShowClearButton="true"
        Items="@Items"
        OnSearch="@OnSearch"
        OnClear="@OnClear"></Search>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private static IEnumerable<string> Items => new string[] { "1", "12", "123", "1234" };

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

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

Keyboard input instant search

Control whether search operations are performed in real time by setting the IsOnInputTrigger parameter

Demo

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Searchs> Localizer

<Search IgnoreCase="true"
        IsLikeMatch="true"
        PlaceHolder="@Localizer["SearchsPlaceHolder"]"
        IsOnInputTrigger="true"
        Items="@Items"
        OnSearch="@OnSearch" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private static IEnumerable<string> Items => new string[] { "1", "12", "123", "1234" };

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

ValidateForm

Inside ValidateForm

Demo

<ValidateForm Model="@Model">
    <Search Items="StaticItems" IsOnInputTrigger="true" @bind-Value="Model.Name" />
</ValidateForm>

@code {
    private Foo Model { get; set; } = new Foo() { Name = "" };
    private static List<string> StaticItems => new() { "1", "12", "123", "1234", "12345", "123456", "abc", "abcdef", "ABC", "aBcDeFg", "ABCDEFG" };
}

Attributes

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Search box

Used for data search

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01