Paginator
Import
import { Paginator } from '@pzeta/vue-components'
import type {
PaginatorProps,
PaginatorEmits,
PaginatorPageState,
PaginatorTemplate,
PaginatorSize,
PaginatorVariant,
PageState,
} from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
totalRecords | number | 0 | Numero totale di record |
rows | number | 10 | Numero di righe per pagina |
first | number | 0 | Indice del primo record (v-model:first) |
pageLinkSize | number | 5 | Numero di link pagina da mostrare |
rowsPerPageOptions | number[] | [] | Opzioni per il dropdown righe per pagina (se vuoto il dropdown non appare) |
template | string | PaginatorTemplate | 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink' | Template elementi paginator |
currentPageReportTemplate | string | '({currentPage} di {totalPages})' | Template report pagina corrente |
alwaysShow | boolean | true | Mostra sempre il paginator anche con una sola pagina |
variant | 'basic' | 'bordered' | 'bordered-group' | 'basic' | Variante visiva |
size | 'small' | 'medium' | 'large' | 'medium' | Dimensione del componente |
disabled | boolean | false | Disabilita tutti i controlli |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
page | PaginatorPageState | Cambio pagina |
update:first | number | Cambio indice primo record (per v-model:first) |
update:rows | number | Cambio righe per pagina |
PaginatorPageState
interface PaginatorPageState {
page: number // Pagina corrente (0-indexed)
first: number // Indice del primo record
rows: number // Righe per pagina
pageCount: number // Numero totale di pagine
}
Slot
| Slot | Scope | Descrizione |
|---|---|---|
start | PaginatorPageState | Contenuto personalizzato a sinistra |
end | PaginatorPageState | Contenuto personalizzato a destra |
Template — Elementi disponibili
La prop template è una stringa con i nomi degli elementi separati da spazi. Gli elementi disponibili sono:
| Elemento | Descrizione |
|---|---|
FirstPageLink | Pulsante prima pagina |
PrevPageLink | Pulsante pagina precedente |
PageLinks | Link numerici alle pagine |
NextPageLink | Pulsante pagina successiva |
LastPageLink | Pulsante ultima pagina |
RowsPerPageDropdown | Dropdown selezione righe per pagina |
CurrentPageReport | Report pagina corrente |
JumpToPageInput | Input per navigare a una pagina specifica |
JumpToPageDropdown | Dropdown per navigare a una pagina specifica |
Template responsivo
La prop template accetta anche un oggetto PaginatorTemplate per variare il template in base al breakpoint:
interface PaginatorTemplate {
'640px'?: string // template per schermi piccoli
'960px'?: string // template per schermi medi
'1280px'?: string // template per schermi grandi
default?: string // template di fallback
}
CurrentPageReportTemplate — Variabili
Il currentPageReportTemplate supporta le seguenti variabili:
| Variabile | Valore |
|---|---|
{currentPage} | Numero pagina corrente (1-based) |
{totalPages} | Numero totale di pagine |
{first} | Indice del primo record (1-based) |
{last} | Indice dell'ultimo record |
{rows} | Righe per pagina |
{totalRecords} | Totale record |
Esempi
Template minimo
Con JumpToPage e RowsPerPage
Varianti visive
Dimensioni
Slot start/end
Disabilitato
Integrazione manuale con una lista
Note
- Il paginator si nasconde automaticamente quando
alwaysShowèfalsee c'è una sola pagina. - Il dropdown
RowsPerPageDropdownnon appare serowsPerPageOptionsè un array vuoto (default). PageStateè un alias diPaginatorPageStateper compatibilità con PrimeVue 4.
Accessibilità
Il componente usa un elemento <nav> con aria-label localizzato. I pulsanti di navigazione hanno aria-label descrittivi. Il link della pagina corrente ha aria-current="page". I pulsanti disabilitati ricevono l'attributo disabled.
TypeScript
import type {
PaginatorProps,
PaginatorEmits,
PaginatorPageState,
PaginatorTemplate,
PaginatorSize,
PaginatorVariant,
PageState, // alias di PaginatorPageState
} from '@pzeta/vue-components'
OrderList
Lista riordinabile con pulsanti freccia (su/giù/top/bottom) e selezione multipla degli elementi; supporta slot personalizzati per item e header.
PickList
Componente a doppia lista per il trasferimento di elementi da source a target (e viceversa), con pulsanti di spostamento, riordinamento interno e selezione multipla.