SbPagination

A pagination component for navigating through paged data. Uses zero-based page index and supports page size selector, first/prev/next/last buttons, and configurable visible page numbers.

Parameters

Parameter	Type	Default	Description
PageIndex	int	0	Current zero-based page index
PageSize	int	10	Items per page
TotalCount	long	0	Total number of items
ShowPageSizeSelector	bool	true	Whether to show the page size dropdown
PageSizeOptions	int[]	{ 5, 10, 25, 50, 100 }	Options for page size selector
ShowPageNumbers	bool	true	Whether to show page number buttons
MaxVisiblePages	int	5	Max page number buttons to show (desktop)
MaxVisiblePagesMobile	int	3	Max page number buttons when viewport < 640px
PageSizeLabel	string?	null	Label for page size selector (null = localized default)
FirstPageLabel	string?	null	First page button (null = localized)
PreviousPageLabel	string?	null	Previous button (null = localized)
NextPageLabel	string?	null	Next button (null = localized)
LastPageLabel	string?	null	Last page button (null = localized)
PageAriaLabelFormat	string?	null	Aria format for page buttons, {0} = page number
NoItemsText	string?	null	Text when TotalCount is 0
PageInfoFormat	string?	null	Format for "X–Y of Z"; {0}=start, {1}=end, {2}=total
Class	string?	null	Additional CSS classes

Bindings / Events

Parameter	Type	Description
PageIndexChanged	EventCallback<int>	Fired when page index changes
PageSizeChanged	EventCallback<int>	Fired when page size changes

Use @bind-PageIndex and @bind-PageSize for two-way binding.

CSS Classes

sb-pagination - Base class
sb-pagination__container - Inner wrapper
sb-pagination__page-size - Page size selector area
sb-pagination__info - "X–Y of Z" text
sb-pagination__controls - Buttons container
sb-pagination__button - Nav button
sb-pagination__pages - Page numbers wrapper
sb-pagination__page - Page number button
sb-pagination__ellipsis - Ellipsis between page ranges

Examples

Basic Usage

<SbPagination @bind-PageIndex="_pageIndex"
              @bind-PageSize="_pageSize"
              TotalCount="100" />

Without Page Size Selector

<SbPagination @bind-PageIndex="_pageIndex"
              PageSize="10"
              TotalCount="75"
              ShowPageSizeSelector="false" />

Without Page Numbers

<SbPagination @bind-PageIndex="_pageIndex"
              @bind-PageSize="_pageSize"
              TotalCount="200"
              ShowPageNumbers="false" />

Custom Page Size Options

<SbPagination @bind-PageIndex="_pageIndex"
              @bind-PageSize="_pageSize"
              TotalCount="500"
              PageSizeOptions="@(new[] { 10, 20, 50, 100 })" />

Many Pages (MaxVisiblePages)

<SbPagination @bind-PageIndex="_pageIndex"
              PageSize="10"
              TotalCount="1000"
              MaxVisiblePages="7"
              ShowPageSizeSelector="false" />

With Data List

<SbStack Gap="2">
    @foreach (var item in GetPagedItems())
    {
        <SbCard>
            <SbStack Direction="SbStackDirection.Row" Justify="SbJustify.SpaceBetween">
                <SbText Weight="SbFontWeight.Semibold">Item @item.Id</SbText>
                <SbText Color="SbColor.Muted" Size="SbSize.Sm">@item.Name</SbText>
            </SbStack>
        </SbCard>
    }
</SbStack>
<SbPagination @bind-PageIndex="_dataPageIndex"
              @bind-PageSize="_dataPageSize"
              TotalCount="@_items.Count" />

3.8 KiB Raw Blame History Unescape Escape