Pagination

ページをナビゲートするためのボタンまたはリンクのリスト。

使用法

現在のページを制御するには、default-pageプロパティまたはv-model:pageディレクティブを使用します。

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

ページネーションコンポーネントはページを表示するためにButtonを使用し、スタイルを設定するためにcolor、variant、size小道具を使用します。

Total

totalプロパティを使用して、リスト内のアイテムの合計数を設定します。

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-pageプロパティを使用して、1ページあたりのアイテム数を設定します。デフォルトは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>

兄弟数

sibling-countプロパティを使用して、表示する兄弟の数を設定します。デフォルトは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>

エッジを表示

show-edgesプロパティを使用して、省略記号、最初と最後のページを常に表示します。デフォルトは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>

コントロールを表示

show-controlsプロパティを使用して、最初、前、次、最後のボタンを表示します。デフォルトは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>

Color

colorプロパティを使用して、非アクティブなコントロールの色を設定します。デフォルトは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プロパティを使用して、非アクティブなコントロールのバリアントを設定します。デフォルトは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>

Active Color

active-colorプロパティを使用して、アクティブなコントロールの色を設定します。デフォルトは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>

Activeバリアント

active-variantプロパティを使用して、アクティブコントロールのバリアントを設定します。デフォルトは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>

サイズ

sizeプロパティを使用してコントロールのサイズを設定します。デフォルトは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>

無効

disabledプロパティを使用して、ページネーションコントロールを無効にします。

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>

例

リンク付き

ボタンをリンクに変換するには、toプロパティを使用します。ページ番号を受け取り、ルート先を返す関数を渡します。

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

この例では、ページの先頭に移動しないように#with-linksハッシュを追加しています。

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

スロット

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

Theme

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.