Pagination

PaginationGitLab
Uma lista de botões ou links para navegar pelas páginas.

Uso

Use a prop default-page ou a diretiva v-model:page para controlar a página atual.

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

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

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

const page = ref(5)
</script>

<template>
  <NPagination v-model:page="page" :total="100" />
</template>
O componente Pagination usa alguns Button para exibir as páginas; use as props color, variant e size para estilizá-los.

Total

Use a prop total para definir o número total de itens na lista.

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

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

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

const page = ref(5)
</script>

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

Itens por página

Use a prop items-per-page para definir o número de itens por página. O padrão é 10.

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

<template>
  <NPagination 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>
  <NPagination v-model:page="page" :items-per-page="20" :total="100" />
</template>

Contagem de irmãos

Use a prop sibling-count para definir o número de irmãos a exibir. O padrão é 2.

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

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

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

const page = ref(5)
</script>

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

Exibir extremidades

Use a prop show-edges para sempre exibir as reticências e as primeiras e últimas páginas. O padrão é false.

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

<template>
  <NPagination 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>
  <NPagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
</template>

Exibir controles

Use a prop show-controls para exibir os botões de primeira, anterior, próxima e última. O padrão é true.

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

<template>
  <NPagination 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>
  <NPagination v-model:page="page" :show-controls="false" show-edges :total="100" />
</template>

Cor

Use a prop color para definir a cor dos controles inativos. O padrão é neutral.

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

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

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

const page = ref(5)
</script>

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

Variante

Use a prop variant para definir a variante dos controles inativos. O padrão é outline.

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

<template>
  <NPagination 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>
  <NPagination v-model:page="page" color="neutral" variant="subtle" :total="100" />
</template>

Cor ativa

Use a prop active-color para definir a cor do controle ativo. O padrão é primary.

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

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

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

const page = ref(5)
</script>

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

Variante ativa

Use a prop active-variant para definir a variante do controle ativo. O padrão é solid.

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

<template>
  <NPagination 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>
  <NPagination v-model:page="page" active-color="primary" active-variant="subtle" :total="100" />
</template>

Tamanho

Use a prop size para definir o tamanho dos controles. O padrão é md.

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

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

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

const page = ref(5)
</script>

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

Desabilitado

Use a prop disabled para desabilitar os controles de paginação.

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

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

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

const page = ref(5)
</script>

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

Exemplos

Com links

Use a prop to para transformar os botões em links. Passe uma função que recebe o número da página e retorna um destino de rota.

Neste exemplo, adicionamos o hash #with-links para evitar ir ao topo da página.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

firstIconappConfig.ui.icons.chevronDoubleLeftany

The icon to use for the first page control.

prevIconappConfig.ui.icons.chevronLeftany

The icon to use for the previous page control.

nextIconappConfig.ui.icons.chevronRightany

The icon to use for the next page control.

lastIconappConfig.ui.icons.chevronDoubleRightany

The icon to use for the last page control.

ellipsisIconappConfig.ui.icons.ellipsisany

The icon to use for the ellipsis control.

color'neutral' "error" | "neutral" | "primary" | "secondary" | "accent" | "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" | "accent" | "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.

showControlstrueboolean

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.

disabledboolean

When true, prevents the user from interacting with item

itemsPerPage10 number

Number of items per page

page number

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

showEdgesfalseboolean

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

siblingCount2 number

Number of sibling should be shown around the current page

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

Tema

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 '@nitro/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

Uma lista de links que pode ser exibida horizontal ou verticalmente.

Stepper

Um conjunto de etapas usadas para indicar o progresso em um processo de várias etapas.