- bit BlazorUI
Home Docs

Pagination

Pagination component helps users easily navigate through content, allowing swift browsing across multiple pages or sections, commonly used in lists, tables, and content-rich interfaces.

Usage

Basic
The pagination offers three appearance options: Primary (default), Standard, and Text.

Primary pagination
Primary paginations are attention-grabbing, featuring a filled appearance. They're designed for essential actions at the core of your application.

Standard pagination
Standard paginations offer a moderate level of emphasis, suitable for important actions that aren't central to the application. They serve as a middle ground between Text paginations and the more prominent Primary paginations, providing flexibility in emphasis.

Text pagination
Text paginations are best suited for understated actions, serving as a less prominent choice in various interface elements.

Default selected
Displays default selected page within the BitPagination component.

BoundaryCount
Set a limit to the number of pages shown at the beginning and end of the pagination range.

•••
•••
MiddleCount
Allowing users to set the count of pages displayed in the middle portion of the pagination control. It also demonstrates how pages are rendered within the defined middle count range.

•••
•••
Events
Managing pagination page change event (OnChange).

Changed page: 1
Navigation buttons
There are additional navigation buttons within the Pagination component, providing quick access to the initial and final pages.

•••
Icon
Displaying custom icons feature within the Pagination navigation buttons.

Color
Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.

Size
Varying sizes for paginations tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.

Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.

Component's Style & Class:




Styles & Classes:

RTL

Implementation

BitPagination parameters
Name
Type
Default value
Description
Appearance BitAppearance BitAppearance.Primary The appearance of pagination, Possible values: Primary | Standard | Text
BoundaryCount int 2 The number of items at the start and end of the pagination.
Classes BitPaginationClassStyles? null Custom CSS classes for different parts of the BitPagination.
Color BitColor? null The color of the Pagination.
Count int 1 The number of pages.
DefaultSelectedPage int 0 The default selected page number.
FirstIcon string ChevronLeftEnd6 Icon of the first button.
LastIcon string ChevronRightEnd6 Icon of the last button.
MiddleCount int 3 The number of items in the middle of the pagination.
NextIcon string ChevronRight Icon of the next button.
OnChange EventCallback<int> null Invokes the callback when the selected page changes.
PreviousIcon string ChevronLeft Icon of the previous button.
SelectedPage int 0 The selected page number.
SelectedPageChanged EventCallback<int> null Invokes the callback when the selected page changes.
ShowFirstButton bool false If true, the navigate to the first page button is shown.
ShowLastButton bool false If true, the navigate to the last page button is shown.
ShowNextButton bool true If true, the navigate to the next page button is shown.
ShowPreviousButton bool true If true, the navigate to the previous page button is shown.
Size BitPaginationSize? null The size of Pagination, Possible values: Small | Medium | Large
Styles BitPaginationClassStyles? null Custom CSS styles for different parts of the BitPagination.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitPaginationClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitPagination.
Button string? null Custom CSS classes/styles for the button of the BitPagination.
Ellipsis string? null Custom CSS classes/styles for the ellipsis of the BitPagination.
SelectedButton string? null Custom CSS classes/styles for the selected button of the BitPagination.
FirstButton string? null Custom CSS classes/styles for the first button of the BitPagination.
FirstButtonIcon string? null Custom CSS classes/styles for the icon of the first button of the BitPagination.
PreviousButton string? null Custom CSS classes/styles for the previous button of the BitPagination.
PreviousButtonIcon string? null Custom CSS classes/styles for the icon of the previous button of the BitPagination.
NextButton string? null Custom CSS classes/styles for the next button of the BitPagination.
NextButtonIcon string? null Custom CSS classes/styles for the icon of the next button of the BitPagination.
LastButton string? null Custom CSS classes/styles for the last button of the BitPagination.
LastButtonIcon string? null Custom CSS classes/styles for the icon of the last button of the BitPagination.
BitAppearance enum
Name
Value
Description
Primary 0 The appearance for primary actions that are high-emphasis.
Standard 1 The appearance for important actions that are medium-emphasis.
Text 2 The appearance for less-pronounced actions.
BitColor enum
Name
Value
Description
Info 0 Info styled Pagination.
Success 1 Success styled Pagination.
Warning 2 Warning styled Pagination.
SevereWarning 3 Severe Warning styled Pagination.
Error 4 Error styled Pagination.
BitPaginationSize enum
Name
Value
Description
Small 0 The small size Pagination.
Medium 1 The medium size Pagination.
Large 2 The large size Pagination.
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.