Pagination

Een lijst met knoppen of links om door pagina 's te navigeren.

Gebruik

Gebruik de default-page prop of de v-model:page richtlijn om de huidige pagina te besturen.

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

De Pagination-component gebruikt enkele Button om de pagina 's weer te geven, gebruik color, variant en size rekwisieten om ze te stylen.

Totaal

Gebruik de total prop om het totale aantal items in de lijst in te stellen.

page

total

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

Gebruik de items-per-page prop om het aantal items per pagina in te stellen. Standaard 10.

itemsPerPage

total

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

Aantal broers en zussen

Gebruik de sibling-count-prop om het aantal broers en zussen in te stellen dat moet worden weergegeven. Standaard 2.

siblingCount

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

Randen tonen

Gebruik de show-edges prop om altijd de ellips, eerste en laatste pagina 's weer te geven. Standaard false.

showEdges

siblingCount

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

Besturing tonen

Gebruik de show-controls prop om de eerste, vorige, volgende en laatste knoppen weer te geven. Standaard true.

showControls

showEdges

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

Kleur

Gebruik de color prop om de kleur van de inactieve besturingselementen in te stellen. Standaard ingesteld op neutral.

color

<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

Gebruik de variant prop om de variant van de inactieve besturingselementen in te stellen. Standaard ingesteld op outline.

color

variant

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

Actieve Kleur

Gebruik de active-color prop om de kleur van het actieve besturingselement in te stellen. Standaard ingesteld op primary.

activeColor

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

Actieve Variant

Gebruik de active-variant prop om de variant van het actieve besturingselement in te stellen. Standaard ingesteld op solid.

activeColor

activeVariant

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

Grootte

Gebruik de size-prop om de grootte van de bedieningselementen in te stellen. Standaard ingesteld op md.

size

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

Uitgeschakeld

Gebruik de disabled prop om de paginatieknoppen uit te schakelen.

disabled

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

Voorbeelden

Met links

Gebruik de to-prop om knoppen om te zetten in links. Geef een functie door die het paginanummer ontvangt en een routebestemming retourneert.

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

In dit voorbeeld voegen we de #with-links-hash toe om te voorkomen dat we naar de bovenkant van de pagina gaan.

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; }`

Uitzendt

Event	Type
`update:page`	`[value: number]`

Thema

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.