Pagination

페이지를 탐색할 단추 또는 링크 목록입니다.

Usage

default-page prop 또는 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를 사용하여 페이지를 표시하고, , 및 [)를 사용하여 props 스타일을 표시합니다.

전체

total prop을 사용하여 목록에 있는 총 항목 수를 설정합니다.

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 페이지당 항목

items-per-page 소품을 사용하여 페이지당 항목 수를 설정합니다. 기본값은 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 카운트

sibling-count prop을 사용하여 표시할 형제 수를 설정합니다. 기본값은 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 prop을 사용하여 첫 번째, prev, 다음 및 마지막 버튼을 표시합니다. 기본값은 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 Prop을 사용하여 비활성 컨트롤의 색상을 설정합니다. 기본값은 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 색상

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 Prop을 사용하여 활성 컨트롤의 변형을 설정합니다. 기본값은 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 파일

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 prop을 사용하여 페이지 매김 컨트롤을 비활성화합니다.

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>

examples 예제

링크

to prop을 사용하여 단추를 링크로 변환합니다. 페이지 번호를 받고 경로 목적지를 반환하는 함수를 전달합니다.

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

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: ''
          }
        }
      }
    })
  ]
})

변경 로그

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.