Provides a clean way to navigate between multiple pages of content.
By default, the q2-pagination component will calculate whether it has enough space to render the entirety of its content. If not, it will display a minimal view to prevent overflow issues.
Using the records-only will simplify the appearance of the q2-pagination component. By only displaying the number of records currently displayed.
<q2-pagination total="200" page="1" records-only></q2-pagination>Using the pages-only will simplify the appearance of the q2-pagination component. By only displaying the current and total pages.
The pages-only option will auto-determine the total number of pages based on the value of the total property in relation to the per-page attribute. If the page is provided that will be used instead.
<q2-pagination page="1" pages="25" pages-only></q2-pagination>alignmentIndicates the horizontal alignment of children elements
autoSizeauto-sizeDetermines whether the component uses the dynamic resizing behavior.
pageThe current page that is being displayed.
pagesThe number of pages that can be displayed.
Only referenced when pagesOnly is true.
pagesOnlypages-onlyIndicates to display only the current and total pages.
perPageper-pageThe total number of records displayed on each page.
perPageIncrementsper-page-incrementsA list of perPage values.
This generates a Select element that allows the user to modify the perPage value.
Example:
this.perPageIncrements = [10, 25, 50];recordTyperecord-typeDescription of the record type to be displayed alongside the record count.
recordsOnlyrecords-onlyIndicates to display only the current and total records.
totalThe total number of records to paginate.
The q2-pagination element exposes events that can be used to send and receive data from the component based on user interaction.
Emitted when the page is changed.
{ page: number; }If an event handler is bound to the element using:
onchange property - The default handler will not fire, and the value must be updated in the custom handler.addEventListener("change") method - The default handler will fire alongside the custom handler.The q2-pagination element exposes methods that can be used to perform various actions on the component.
Emulates clicking the button that controls moving to the first page, and emitting a change event with the updated page number.
If the <button> is disabled, this method does nothing.
clickFirstPage() => Promise<void>Emulates clicking the button that controls moving to the last page, and emitting a change event with the updated page number.
If the <button> is disabled, this method does nothing.
clickLastPage() => Promise<void>Emulates clicking the button that controls moving to the next page, and emitting a change event with the updated page number.
If the <button> is disabled, this method does nothing.
clickNextPage() => Promise<void>Emulates clicking the button that controls moving to the previous page, and emitting a change event with the updated page number.
If the <button> is disabled, this method does nothing.
clickPreviousPage() => Promise<void>Emulates selecting a perPage value from the perPageIncrements dropdown,
and updates the value of the perPage property.
If value is not in the perPageIncrements array, this method does nothing.
selectPerPageIncrementValue(value: number) => Promise<void>Emulates setting the page value in the <input> field,
and emitting a change event with the updated page number.
If value is invalid, this method does nothing.
setPageValue(value: number) => Promise<void>Initial Release
The following CSS variables are available to override the default theme styles of the q2-paginationcomponent.
Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!