Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

AutoFill components

Auto-fill forms when selected via IntelliSense prompt option

Basic usage

fill the form

Demo

input Name Name smart prompt, automatically fill in the form below after selecting the prompt item Currently supports keyboard Enter Spance

<AutoFill TValue="Foo" Value="Model" Items="Items" IsLikeMatch="true" OnSelectedItemChanged="OnSelectedItemChanged"
          OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true">
    <Template>
        <div class="d-flex">
            <div>
                <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" />
            </div>
            <div class="ps-2">
                <div>@context.Name</div>
                <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
            </div>
        </div>
    </Template>
</AutoFill>
<img src="@Foo.GetAvatarUrl(Model.Id)" class="shadow" style="width: 140px; margin-bottom: 1rem; border-radius: 6px;" />
<EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />

@code {
    [NotNull]
    private Foo Model { get; set; } = new();

    private Task OnSelectedItemChanged(Foo foo)
    {
        Model = Utility.Clone(foo);
        StateHasChanged();
        return Task.CompletedTask;
    }

    private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";

    [NotNull]
    private IEnumerable<Foo>? Items { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(LocalizerFoo);
        Model = Items.First();
    }
}

custom filter

Filter data by setting custom filter condition callback delegate OnCustomFilter

Demo

Enter the name intelligent prompt, and delegate OnCustomFilter to filter data by setting a user-defined filter condition callback. The current filter condition is that Name contains the input string Count and the value is greater than 50

<AutoFill TValue="Foo" Value="Model" Items="Items" OnCustomFilter="OnCustomFilter"
          OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3">
    <Template>
        <div class="d-flex">
            <div>
                <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" />
            </div>
            <div class="ps-2">
                <div>@context.Name</div>
                <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
            </div>
        </div>
    </Template>
</AutoFill>
<EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />

@code {
    [NotNull]
    private Foo Model { get; set; } = new();

    [NotNull]
    private IEnumerable<Foo>? Items { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(LocalizerFoo);
        Model = Items.First();
    }

    private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
    {
        var items = string.IsNullOrEmpty(searchText) ? Items : Items.Where(i => i.Count > 50 && i.Name!.Contains(searchText));
        return Task.FromResult(items);
    }

    private Task OnSelectedItemChanged(Foo foo)
    {
        Model = Utility.Clone(foo);
        StateHasChanged();
        return Task.CompletedTask;
    }

    private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";
}

Turn off auto-expand dropdown

By setting ShowDropdownListOnFocus="false"

Demo

parameter ShowDropdownListOnFocus the default value is true. After the component gets the focus, it will automatically expand the candidate drop-down box, set to false turn off this feature

<AutoFill TValue="Foo" Value="Model" Items="Items" ShowDropdownListOnFocus="false"
          OnGetDisplayText="OnGetDisplayText" class="mb-3">
    <Template>
        <div class="d-flex">
            <div>
                <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" />
            </div>
            <div class="ps-2">
                <div>@context.Name</div>
                <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
            </div>
        </div>
    </Template>
</AutoFill>
<EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />

@code {
    [NotNull]
    private Foo Model { get; set; } = new();

    private static string OnGetDisplayText(Foo foo) => foo.Name ?? "";

    [NotNull]
    private IEnumerable<Foo>? Items { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(LocalizerFoo);
        Model = Items.First();
    }
}

Attributes

@page "/autofills"
@inject IStringLocalizer<AutoFills> Localizer

<h3>AutoFill components</h3>
<h4>Auto-fill forms when selected via IntelliSense prompt option</h4>

<DemoBlock Title="Basic usage" Introduction="fill the form"
           Name="Normal" Demo="typeof(Demos.AutoFill.AutoFillNormal)">
    <div class="mb-3">
        @((MarkupString)input <code>Name</code> Name smart prompt, automatically fill in the form below after selecting the prompt item Currently supports keyboard <kbd>Enter</kbd> <kbd>Spance</kbd> <kbd><i class="fa-solid fa-arrow-up"></i></kbd> <kbd><i class="fa-solid fa-arrow-down"></i></kbd>.Value)
    </div>
</DemoBlock>

<DemoBlock Title="custom filter" Introduction="Filter data by setting custom filter condition callback delegate <code>OnCustomFilter</code>"
           Name="CustomFilter" Demo="typeof(Demos.AutoFill.AutoFillCustomFilter)">
    <div class="mb-3">Enter the <code>name</code> intelligent prompt, and delegate <code>OnCustomFilter</code> to filter data by setting a user-defined filter condition callback. The current filter condition is that <code>Name</code> contains the input string <code>Count</code> and the value is greater than <b>50</b></div>
</DemoBlock>

<DemoBlock Title="Turn off auto-expand dropdown" Introduction="By setting <code>ShowDropdownListOnFocus=&quot;false&quot;</code>"
           Name="ShowDropdownListOnFocus" Demo="typeof(Demos.AutoFill.AutoFillShowDropdownListOnFocus)">
    <div class="mb-3">
        @((MarkupString)parameter <code>ShowDropdownListOnFocus</code> the default value is <code>true</code>. After the component gets the focus, it will automatically expand the candidate drop-down box, set to <code>false</code> turn off this feature.Value)
    </div>
</DemoBlock>

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

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
///
/// </summary>
partial class AutoFills
{
    /// <summary>
    /// Get property method
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new[]
    {
        // TODO: move to database
        new AttributeItem() {
            Name = "DisplayCount",
            Description = Localizer["Att1"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "NoDataTip",
            Description = Localizer["Att2"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = Localizer["Def2"]
        },
        new AttributeItem() {
            Name = "IgnoreCase",
            Description = Localizer["Att3"],
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "IsLikeMatch",
            Description = Localizer["Att4"],
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Items",
            Description = Localizer["Att5"],
            Type = "IEnumerable<TValue>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem()
        {
            Name = "Debounce",
            Description = Localizer["Att6"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = "0"
        },
        new AttributeItem() {
            Name = "OnCustomFilter",
            Description = Localizer["Att7"],
            Type = "Func<string, Task<IEnumerable<TValue>>>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "OnGetDisplayText",
            Description = Localizer["Att8"],
            Type = "Func<TValue, string>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "OnSelectedItemChanged",
            Description = Localizer["Att9"],
            Type = "Func<TValue, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = nameof(AutoFill<Foo>.ShowDropdownListOnFocus),
            Description = Localizer["Att10"],
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "Template",
            Description = Localizer["Att11"],
            Type = "RenderFragment<TValue>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem()
        {
            Name = nameof(AutoFill<string>.SkipEnter),
            Description = Localizer["Att12"],
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = nameof(AutoFill<string>.SkipEsc),
            Description = Localizer["Att13"],
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "false"
        }
    };
}

AutoFill components

Auto-fill forms when selected via IntelliSense prompt option

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.2.5-beta02