Pagination

Page navigation: previous/next, page window with ellipses, size changer, jumper and total count. The window-shrinking algorithm lives in core as pure functions.

Basic Usage

Basic Usage

• •••

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

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

<script>
export default {}
</script>

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

Total and Size Changer

Total and Size Changer

Total 480 items

• •••

Items per page10 / page20 / page30 / page40 / page

<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>

Jumper

Jumper

Total 480 items

• •••

Go to

<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>

Simple Mode

Simple Mode

1 / 48Go to

<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>

Controlled Usage

Controlled Usage

• •••

Current page: 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>

Page size and disabled

v-model:page-size controls the page size and page-sizes customizes the options; disabled disables the whole pagination.

Page size & disabled

• •••

Items per page10 / page20 / page50 / page100 / page

Page size: 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	Description	Type	Default
total	Total items (required)	number	—
pageSize	Items per page	number	10
current	Current page (v-model:current)	number	—
pageSizes	Size options	number[]	() => [10, 20, 30, 40]
showTotal	Show the total count	boolean	false
showSizeChanger	Show the size changer	boolean	false
showJumper	Show the jumper input	boolean	false
simple	Compact mode	boolean	false
disabled	Disable everything	boolean	false
sx	sx quick-layout props	LhSxProps	—

Events

Event	Description	Callback
update:current	Current page changed (v-model)	(page: number)
update:pageSize	Page size changed (v-model:pageSize)	(size: number)
change	Page changed	(page: number)
size-change	Page size changed	(size: number)

Accessibility

• The root is <nav aria-label="pagination">
• The active page button gets aria-current="page"
• Every page button and the prev/next buttons carry individual aria-labels (from the pagination.page / prev / next locale messages); the bare "‹" "›" glyphs are aria-hidden
• The jumper input has a real <label> (from the pagination.goto locale message)
• The size changer is a native <select> with an aria-label (from pagination.sizeChangerLabel)
• Ellipses are non-interactive aria-hidden elements and stay out of the keyboard flow

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/pagination/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhPaginationProps

export interface LhPaginationProps {
  total: number
  pageSize?: number
  current?: number
  pageSizes?: number[]
  showTotal?: boolean
  showSizeChanger?: boolean
  showJumper?: boolean
  simple?: boolean
  disabled?: boolean
  sx?: LhSxProps
}