Pagination API

Name: FishtVue
Author: Egoka

This page provides an overview of the Pagination component API, detailing its props, emits, slots, and exposed methods/states.

Props

The Pagination component accepts the following props:

Prop	Default	Type	Description
`modelValue`	`1`	`number` or `undefined`	The current active page.
`mode`	`"outlined"`	`"outlined"` or `"filled"` or `"underlined"` or `undefined`	The visual style of the pagination component.
`sizePage`	`5`	`number` or `undefined`	The number of items displayed per page.
`sizesSelector`	`[5, 15, 20, 50, 100, 150]`	`Array<number>` or `undefined`	Available options for selecting the page size.
`visibleNumberPages`	`5`	`number` or `undefined`	The number of pages visible in the pagination navigation.
`total`	`0`	`number` or `undefined`	The total number of items across all pages.
`isInfoText`	`false`	`boolean` or `undefined`	Displays informational text about the pagination state.
`isPageSizeSelector`	`false`	`boolean` or `undefined`	Enables a selector for choosing the page size.
`isHiddenNavigationButtons`	`false`	`boolean` or `undefined`	Hides the "Previous" and "Next" navigation buttons.
`class`	`""`	`StyleClass` or `undefined`	Custom CSS class for the pagination container.

The Pagination component emits the following events:

Event	Payload	Description
`update:modelValue`	`number`	Emitted when the active page changes.
`update:sizePage`	`number`	Emitted when the page size is updated by the user.

The Pagination component provides the following slots:

Slot	Payload	Description
`default`	`VNode[]`	Default slot for custom content inside the pagination component.

The Pagination component exposes the following methods and states via ref:

Expose	Value	Description
`selectPageSize`	`SelectExpose` or `undefined`	Reference to the page size selector.
`sizePage`	`number` or `undefined`	The current page size.
`visibleNumberPages`	`number`	The number of pages visible in the pagination control.
`total`	`number`	The total number of items across all pages.
`isInfoText`	`boolean`	Indicates whether informational text about pagination is enabled.
`isPageSizeSelector`	`boolean`	Indicates whether the page size selector is enabled.
`isNavigationButtons`	`boolean`	Indicates whether the navigation buttons are visible.
`arraySizesSelector`	`Array<{ key: number; value: string }>`	The available sizes for the page size selector.
`pages`	`Array<number>`	The array of page numbers available for navigation.
`activePage`	`number`	The currently active page number.
`mode`	`string`	The current styling mode of the pagination.
`paramsSelect`	`Partial<BaseSelectProps>`	Parameters for the page size selector component.
`switchPage`	`(value: number \| Array<number>) => void`	Switches to a specific page or an array of pages in navigation.
`switchSizePage`	`(sizePageValue: number) => void`	Updates the page size.