Paginación

Navegación por páginas: página anterior / números de página / página siguiente / elipsis / cambio de tamaño de página / salto a una página / total. El algoritmo de contracción de la ventana de páginas está implementado como una función pura en la capa core, iterable por pruebas unitarias exhaustivas.

Uso básico

Uso básico

• •••

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="120" />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="120" />
</template>

Total y cambio de tamaño de página

Total y cambio de tamaño de página

Total: 480 elementos

• •••

Elementos por página10 por página20 por página30 por página40 por página

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" show-total show-size-changer />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" show-total show-size-changer />
</template>

Salto a una página

Salto a una página

Total: 480 elementos

• •••

Ir apágina

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" show-total show-jumper />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" show-total show-jumper />
</template>

Modo compacto

Modo compacto

1 / 48Ir apágina

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" simple show-jumper />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" simple show-jumper />
</template>

Uso controlado

Uso controlado

• •••

Página actual: 2

<script setup lang="ts">
import { ref } from 'vue'
const page = ref(2)
const pageSize = ref(20)
</script>

<template>
  <LhPagination v-model:current="page" :total="95" />
</template>

<script>
export default {
  data() {
    return { page: 2, pageSize: 20 }
  },
}
</script>

<template>
  <LhPagination v-model:current="page" :total="95" />
</template>

Tamaño de página y deshabilitación

v-model:page-size controla el tamaño de página; page-sizes personaliza las opciones de tamaño; disabled deshabilita toda la paginación.

Tamaño de página y deshabilitación

• •••

Elementos por página10 por página20 por página50 por página100 por página

Tamaño de página: 20

• •••

<script setup lang="ts">
import { ref } from 'vue'
const pageSize = ref(20)
</script>

<template>
  <LhPagination
    v-model:page-size="pageSize"
    :total="480"
    show-size-changer
    :page-sizes="[10, 20, 50, 100]"
  />
  <LhPagination :total="480" disabled />
</template>

<script>
export default {
  data() {
    return { pageSize: 20 }
  },
}
</script>

<template>
  <LhPagination
    v-model:page-size="pageSize"
    :total="480"
    show-size-changer
    :page-sizes="[10, 20, 50, 100]"
  />
  <LhPagination :total="480" disabled />
</template>

Pagination API

Props

Prop	Descripción	Tipo	Predeterminado
total	Número total de datos (obligatorio)	number	—
pageSize	Tamaño de página	number	10
current	Página actual (v-model:current)	number	—
pageSizes	Opciones de tamaño de página	number[]	() => [10, 20, 30, 40]
showTotal	Si se muestra el total	boolean	false
showSizeChanger	Si se muestra el cambio de tamaño de página	boolean	false
showJumper	Si se muestra la entrada de salto a una página	boolean	false
simple	Modo compacto	boolean	false
disabled	Si se deshabilita	boolean	false
sx	Props de maquetación rápida sx	LhSxProps	—

Eventos

Evento	Descripción	Parámetro
update:current	Cambia la página actual (v-model)	(page: number)
update:pageSize	Cambia el tamaño de página (v-model:pageSize)	(size: number)
change	Cambia el número de página	(page: number)
size-change	Cambia el tamaño de página	(size: number)

Accesibilidad

• El elemento raíz es <nav aria-label="pagination">
• El botón de la página actual recibe automáticamente aria-current="page"
• Cada botón de página y los botones de página anterior/siguiente tienen su propio aria-label (del paquete de idioma pagination.page / prev / next); los símbolos puros «‹» y «›» quedan ocultos con aria-hidden
• La entrada de salto a una página lleva un <label> real (del paquete de idioma pagination.goto)
• El cambio de tamaño de página es un <select> nativo con aria-label (del paquete de idioma pagination.sizeChangerLabel)
• La elipsis es un elemento puramente visual con aria-hidden, sin interferir en la navegación por teclado

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/pagination/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhPaginationProps

export interface LhPaginationProps {
  /** Número total de datos (obligatorio) */
  total: number
  /** Tamaño de página */
  pageSize?: number
  /** Página actual (v-model:current) */
  current?: number
  /** Opciones de tamaño de página */
  pageSizes?: number[]
  /** Si se muestra el total */
  showTotal?: boolean
  /** Si se muestra el cambio de tamaño de página */
  showSizeChanger?: boolean
  /** Si se muestra la entrada de salto a una página */
  showJumper?: boolean
  /** Modo compacto */
  simple?: boolean
  /** Si se deshabilita */
  disabled?: boolean
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}