Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Repeater

Iterates on a collection and use a template to generate the page

Normal

custom the template by ItemTemplate

Demo

Zhangsan 0001

Zhangsan 0002

Zhangsan 0003

Zhangsan 0004

@inject IStringLocalizer<Foo> FooLocalizer

<Repeater TItem="Foo" Items="Items">
    <ItemTemplate>
        <div class="d-flex">
            @context.Name
        </div>
    </ItemTemplate>
</Repeater>

@code {
    [NotNull]
    private List<Foo>? Items { get; set; }

    protected override void OnInitialized()
    {
        // 生成数据
        Items = Foo.GenerateFoo(FooLocalizer, 4);
    }
}

Async Data

If Items is not provided, you can set ShowLoading to control whether loading prompt information is displayed. You can customize loading information by using LoadingTemplate

Demo

Zhangsan 0001

Zhangsan 0002

Zhangsan 0003

Zhangsan 0004

@inject IStringLocalizer<Foo> FooLocalizer

<Repeater TItem="Foo" Items="Items">
    <ItemTemplate>
        <div class="d-flex">
            @context.Name
        </div>
    </ItemTemplate>
</Repeater>

@code {
    [NotNull]
    private List<Foo>? Items { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(2000);

        // 生成数据
        Items = Foo.GenerateFoo(FooLocalizer, 4);
    }
}

No Data

If Items is empty, use ShowEmpty controls whether no data message is displayed. You can customize the empty data template by EmptyTemplate. EmptyText allows you to customize empty data text information

Demo

No Data

@inject IStringLocalizer<Foo> FooLocalizer

<Repeater TItem="Foo" Items="Items" EmptyText="No Data">
</Repeater>

@code {
    [NotNull]
    private List<Foo>? Items { get; set; } = new();
}

Container Template

By setting ContainerTemplate to the container template, the repetitive part of the template is still rendered via ItemTemplate, In this case, the component is rendered as Table using ContainerTemplate

Demo

Name	Address
Zhangsan 0001	Lane 1608 of Jinshajiang Road, Putuo District, Shanghai
Zhangsan 0002	Lane 1097 of Jinshajiang Road, Putuo District, Shanghai
Zhangsan 0003	Lane 1323 of Jinshajiang Road, Putuo District, Shanghai
Zhangsan 0004	Lane 1889 of Jinshajiang Road, Putuo District, Shanghai

@inject IStringLocalizer<Foo> FooLocalizer

<div>
    <Button OnClick="OnClick" Icon="fa-solid fa-plus" Text="Add"></Button>
</div>

<Repeater TItem="Foo" Items="Items">
    <ContainerTemplate>
        <table class="table">
            <thead>
                <tr><th>@FooLocalizer[nameof(Foo.Name)]</th><th>@FooLocalizer[nameof(Foo.Address)]</th><th></th></tr>
            </thead>
            <tbody>
                @context
            </tbody>
        </table>
    </ContainerTemplate>
    <ItemTemplate>
        <tr>
            <td>@context.Name</td>
            <td>@context.Address</td>
            <td><Button Size="Size.ExtraSmall" Color="Color.Danger" Icon="fa-solid fa-xmark" Text="Delete" OnClick="() => OnDelete(context)"></Button></td>
        </tr>
    </ItemTemplate>
</Repeater>

@code {
    [NotNull]
    private List<Foo>? Items { get; set; }

    protected override void OnInitialized()
    {
        // 生成数据
        Items = Foo.GenerateFoo(FooLocalizer, 4);
    }

    private void OnClick()
    {
        var id = Items.Any() ? Items.Max(i => i.Id) : 0;
        var foo = Foo.Generate(FooLocalizer);
        foo.Id = id + 1;
        Items.Add(foo);
    }

    private void OnDelete(Foo foo)
    {
        Items.Remove(foo);
    }
}

Attributes

B station related video link

交流群

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

Repeater

Iterates on a collection and use a template to generate the page

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01