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
Variants
The pagination offers three variants: Fill (default), Outline, and Text.
Fill
Outline
Text
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.
•••
•••
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.
Primary
Secondary
Tertiary
Info
Success
Warning
SevereWarning
Error
Size
Varying sizes for paginations tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.
Small
Medium
Large
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:
Binding
Examples of one-way and two-way data binding with BitPagination.
One-way:
Two-way:
OnChange:
Changed page: 3
RTL
Use BitPagination in right-to-left (RTL).
API
BitPagination parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| 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 pagination. |
| Color | BitColor? | null | The general color of the pagination. |
| Count | int | 1 | The total number of pages. |
| DefaultSelectedPage | int | 0 | The default selected page number. |
| FirstIcon | string? | null | The icon name of the first button. |
| LastIcon | string? | null | The icon name of the last button. |
| MiddleCount | int | 3 | The number of items to render in the middle of the pagination. |
| NextIcon | string? | null | The icon name of the next button. |
| OnChange | EventCallback<int> | null | The event callback for when selected page changes. |
| PreviousIcon | string? | null | The icon name of the previous button. |
| SelectedPage | int | 0 | The selected page number. |
| ShowFirstButton | bool | false | Determines whether to show the first button. |
| ShowLastButton | bool | false | Determines whether to show the last button. |
| ShowNextButton | bool | true | Determines whether to show the next button. |
| ShowPreviousButton | bool | true | Determines whether to show the previous button. |
| Size | BitSize? | null | The size of the buttons. |
| Styles | BitPaginationClassStyles? | null | Custom CSS styles for different parts of the BitPagination. |
| Variant | BitVariant? | null | The visual variant of the pagination. |
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. |
BitColor enum
Name |
Value |
Description |
|---|---|---|
| Primary | 0 | Info Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
BitSize enum
Name |
Value |
Description |
|---|---|---|
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
BitVariant enum
Name |
Value |
Description |
|---|---|---|
| Fill | 0 | Fill styled variant. |
| Standard | 1 | Outline styled variant. |
| Text | 2 | Text styled variant. |
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. |
- On this page