Pagination

A Pagination component is used to indicate that a series of related content exists across multiple pages.

API Documentation

Example #

<Pagination TotalPages="3" />
<Pagination TotalPages="8" />
<Pagination TotalPages="10" />
<Pagination TotalPages="13" />

Alignment #

<Pagination ActivePageNumber="2" TotalPages="5" />
<Pagination ActivePageNumber="2" TotalPages="5" Alignment="PaginationAlignment.Center" />
<Pagination ActivePageNumber="2" TotalPages="5" Alignment="PaginationAlignment.Right" />

Styles #

<Pagination ActivePageNumber="1" TotalPages="10" IsRounded="true" />
<Pagination ActivePageNumber="3" TotalPages="10" IsRounded="true" />
<Pagination ActivePageNumber="5" TotalPages="10" IsRounded="true" />

Sizes #

<Pagination ActivePageNumber="5" TotalPages="5" Size="PaginationSize.Small" />
<Pagination ActivePageNumber="5" TotalPages="5" />
<Pagination ActivePageNumber="5" TotalPages="5" Size="PaginationSize.Large" />

Events #

Current Page Number: 2
<Pagination ActivePageNumber="@currentPageNumber"
            TotalPages="10"
            PageChanged="OnPageChangedAsync" />

<text>Current Page Number: @currentPageNumber</text>

@code {
    int currentPageNumber = 2;

    private Task OnPageChangedAsync(int newPageNumber)
    {
        currentPageNumber = newPageNumber;
        return Task.CompletedTask;
    }
}
If you like BlazorExpress.Bulma, give it a star on GitHub!