Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

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

B station related video link

交流群

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

AutoFill components

Auto-fill forms when selected via IntelliSense prompt option

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01