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 | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
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. |
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page