Pagination

paginationGitHub à
Une liste de boutons ou de liens pour naviguer dans les pages.

Utilisation

Utilisez la prop default-page ou la directive v-model:page pour contrôler la page en cours.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" />
</template>
Le composant Pagination utilise des accessoires Button pour afficher les pages, utilisez les accessoires color, [variantxph028#variant) et [size](xph0333xph0x pour les styliser.

totale

Utilisez la prop total pour définir le nombre total d'éléments dans la liste.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" />
</template>

Items par page

Utilisez la prop items-per-page pour définir le nombre d'éléments par page. Par défaut, 10.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :items-per-page="20" :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :items-per-page="20" :total="100" />
</template>

Sibling Compteur

Utilisez la prop sibling-count pour définir le nombre de frères et sœurs à afficher. Defaults à 2.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :sibling-count="1" :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :sibling-count="1" :total="100" />
</template>

Afficher les bords

Utilisez la prop show-edges pour toujours afficher les points de suspension, la première et la dernière pages.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
</template>

Show Contrôles

Utilisez la prop show-controls pour afficher les boutons premier, précédent, suivant et dernier. Par défaut true.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :show-controls="false" show-edges :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :show-controls="false" show-edges :total="100" />
</template>

couleur

Utilisez la prop color pour définir la couleur des contrôles inactifs. Par défaut neutral.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" color="primary" :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" color="primary" :total="100" />
</template>

Variant

Utilisez la prop variant pour définir la variante des contrôles inactifs. Defaults sur outline.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" color="neutral" variant="subtle" :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" color="neutral" variant="subtle" :total="100" />
</template>

XPH169xCouleur active

Utilisez la prop active-color pour définir la couleur du contrôle actif. Par défaut, primary.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" active-color="neutral" :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" active-color="neutral" :total="100" />
</template>

Active Variante d'équipement

Utilisez la prop active-variant pour définir la variante du contrôle actif. Par défaut sur solid.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" active-color="primary" active-variant="subtle" :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" active-color="primary" active-variant="subtle" :total="100" />
</template>

Size

Utilisez la prop size pour définir la taille des contrôles. Par défaut, md.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" size="xl" :total="100" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" size="xl" :total="100" />
</template>

Désactivé

Utilisez le prop disabled pour désactiver les contrôles de pagination.

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" disabled />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" disabled />
</template>

Exemples

Avec gauche

Utilisez la prop to pour transformer les boutons en liens. Passez une fonction qui reçoit le numéro de page et renvoie une destination de route.

<script setup lang="ts">
const page = ref(5)

function to(page: number) {
  return {
    query: {
      page
    },
    hash: '#with-links'
  }
}
</script>

<template>
  <UPagination v-model:page="page" :total="100" :to="to" :sibling-count="1" show-edges />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)

function to(page: number) {
  return {
    query: {
      page
    },
    hash: '#with-links'
  }
}
</script>

<template>
  <UPagination v-model:page="page" :total="100" :to="to" :sibling-count="1" show-edges />
</template>
Dans cet exemple, nous ajoutons le hachage #with-links pour éviter d'aller en haut de la page.

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

firstIcon
appConfig.ui.icons.chevronDoubleLeft
any

The icon to use for the first page control.

prevIcon
appConfig.ui.icons.chevronLeft
any

The icon to use for the previous page control.

nextIcon
appConfig.ui.icons.chevronRight
any

The icon to use for the next page control.

lastIcon
appConfig.ui.icons.chevronDoubleRight
any

The icon to use for the last page control.

ellipsisIcon
appConfig.ui.icons.ellipsis
any

The icon to use for the ellipsis control.

color
'neutral'
"error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning"

The color of the pagination controls.

variant
'outline'
"outline" | "solid" | "soft" | "subtle" | "ghost" | "link"

The variant of the pagination controls.

activeColor
'primary'
"error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning"

The color of the active pagination control.

activeVariant
'solid'
"outline" | "solid" | "soft" | "subtle" | "ghost" | "link"

The variant of the active pagination control.

showControls
true
boolean

Whether to show the first, previous, next, and last controls.

size
"xs" | "sm" | "md" | "lg" | "xl"
to
(page: number): string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

A function to render page controls as links.

defaultPage
number

The value of the page that should be active when initially rendered.

Use when you do not need to control the value state.

disabled
boolean

When true, prevents the user from interacting with item

itemsPerPage
10
number

Number of items per page

page
number

The controlled value of the current page. Can be binded as v-model:page.

showEdges
false
boolean

When true, always show first page, last page, and ellipsis

siblingCount
2
number

Number of sibling should be shown around the current page

total
0
number

Number of items in your list

ui
{ root?: SlotClass; list?: SlotClass; ellipsis?: SlotClass; label?: SlotClass; first?: SlotClass; prev?: SlotClass; item?: SlotClass; next?: SlotClass; last?: SlotClass; }

Slots

Slot Type
first
{}
prev
{}
next
{}
last
{}
ellipsis
{ ui: object; }
item
{ page: number; pageCount: number; item: { type: "ellipsis"; } | { type: "page"; value: number; }; index: number; }

Emits

Event Type
update:page
[value: number]

Thème

app.config.ts
export default defineAppConfig({
  ui: {
    pagination: {
      slots: {
        root: '',
        list: 'flex items-center gap-1',
        ellipsis: 'pointer-events-none',
        label: 'min-w-5 text-center',
        first: '',
        prev: '',
        item: '',
        next: '',
        last: ''
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pagination: {
          slots: {
            root: '',
            list: 'flex items-center gap-1',
            ellipsis: 'pointer-events-none',
            label: 'min-w-5 text-center',
            first: '',
            prev: '',
            item: '',
            next: '',
            last: ''
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

NavigationMenu

A list of links that can be displayed horizontally or vertically.

Stepper

A set of steps that are used to indicate progress through a multi-step process.