Pagination
A Pagination component is used to indicate that a series of related content exists across multiple pages.
How it works #
The Pagination component provides navigation for content split across multiple pages, allowing users to move between them easily.
How to use:
This demo shows several basic pagination setups with different page counts, demonstrating how the component adapts to various scenarios.
How to use:
- Add the
Paginationcomponent to your page. - Set the
TotalPagesparameter to specify the number of pages. - Optionally, set
ActivePageNumberto control which page is currently selected.
<Pagination TotalPages="3" />
<Pagination TotalPages="8" />
<Pagination TotalPages="10" />
<Pagination TotalPages="13" />Alignment #
The Pagination component supports alignment options to fit your layout needs.
How to use:
This demo illustrates left, center, and right-aligned pagination controls.
How to use:
- Use the
Alignmentparameter to set the pagination's position:Left(default),Center, orRight. - Combine with
ActivePageNumberandTotalPagesas needed.
<Pagination ActivePageNumber="2" TotalPages="5" />
<Pagination ActivePageNumber="2" TotalPages="5" Alignment="PaginationAlignment.Center" />
<Pagination ActivePageNumber="2" TotalPages="5" Alignment="PaginationAlignment.Right" />Styles #
The Pagination component can be styled for a rounded appearance.
How to use:
This demo displays pagination with rounded styles at different active pages.
How to use:
- Set the
IsRoundedparameter totruefor rounded pagination buttons. - Adjust
ActivePageNumberandTotalPagesas needed for your scenario.
<Pagination ActivePageNumber="1" TotalPages="10" IsRounded="true" />
<Pagination ActivePageNumber="3" TotalPages="10" IsRounded="true" />
<Pagination ActivePageNumber="5" TotalPages="10" IsRounded="true" />Sizes #
The Pagination component supports different sizes to match your UI requirements.
How to use:
This demo shows small, default, and large pagination controls for comparison.
How to use:
- Use the
Sizeparameter to set the pagination size:PaginationSize.Small, default (medium), orPaginationSize.Large. - Combine with other parameters like
ActivePageNumberandTotalPagesas needed.
<Pagination ActivePageNumber="5" TotalPages="5" Size="PaginationSize.Small" />
<Pagination ActivePageNumber="5" TotalPages="5" />
<Pagination ActivePageNumber="5" TotalPages="5" Size="PaginationSize.Large" />Events #
The Pagination component supports event handling to respond to page changes.
How to use:
This demo demonstrates how to track and respond to page changes using event callbacks.
How to use:
- Bind the
ActivePageNumberparameter to a variable in your code. - Handle the
PageChangedevent to update your state when the user selects a different page. - Update your UI or perform actions in the event handler as needed.
<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;
}
}