KRDS Vue

페이지네이션 Pagination ​

페이지네이션은 많은 양의 콘텐츠를 탐색하기 쉽도록 여러 화면에 나누고, 분할된 화면을 탐색하는 데 사용되는 요소이다.

KRDS 가이드

기본 ​

v-model로 현재 페이지를, max로 전체 페이지 수를 지정합니다. aria-label(기본 '페이지 내비게이션')로 이름 붙인 내비게이션 영역(nav)이라, 한 페이지에 내비게이션이 여럿이어도 화면낭독기가 구분합니다. 페이지가 pageRange보다 많으면 첫 페이지와 마지막 페이지 사이를 생략 표시로 줄입니다.

vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsPagination } from '@krds.ui/vue'

  const currentPage = ref(4)
</script>

<template>
  <KrdsPagination v-model="currentPage" :max="99" :page-range="8" />
</template>

KrdsPagination ​

Props

이름타입기본값설명
idstring-엘리먼트 ID
ariaLabelstring'페이지 내비게이션'내비게이션 영역 이름 (nav의 aria-label)
modelValuenumber1현재 페이지 번호 (v-model)
minnumberDEFAULT_MIN최소 페이지 번호 (기본값: 1, 최소값: 1)
pageRangenumberDEFAULT_PAGE_RANGE표시할 페이지 범위
max (필수)number-최대 페이지 번호 (전체 페이지 수)

Events

이름인자설명
update:modelValue[value: number]페이지를 바꿀 때 (페이지 번호, v-model)