Pagination 페이지 매김

페이지 번호 내비게이션: 이전 페이지/페이지 번호/다음 페이지/생략/항목 수 전환/이동/총개수. 페이지 번호 창 축소 알고리즘은 core 계층의 순수 함수로 구현되어 완전한 단위 테스트가 가능합니다.

기본 사용법

vue

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="120" />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhPagination :total="120" />
</template>

총개수와 항목 수 전환

vue

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" show-total show-size-changer />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" show-total show-size-changer />
</template>

페이지 이동

vue

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" show-total show-jumper />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" show-total show-jumper />
</template>

간결 모드

vue

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" simple show-jumper />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" simple show-jumper />
</template>

제어되는 사용법

현재 페이지: 2

vue

<script setup lang="ts">
import { ref } from 'vue'
const page = ref(2)
const pageSize = ref(20)
</script>

<template>
  <LhPagination v-model:current="page" :total="95" />
</template>

vue

<script>
export default {
  data() {
    return { page: 2, pageSize: 20 }
  },
}
</script>

<template>
  <LhPagination v-model:current="page" :total="95" />
</template>

페이지당 항목 수와 비활성화

v-model:page-size로 페이지당 항목 수를 제어하고 page-sizes로 항목 수 옵션을 커스터마이징합니다; disabled로 전체 페이지 매김을 비활성화합니다.

페이지당 항목 수: 20

vue

<script setup lang="ts">
import { ref } from 'vue'
const pageSize = ref(20)
</script>

<template>
  <LhPagination
    v-model:page-size="pageSize"
    :total="480"
    show-size-changer
    :page-sizes="[10, 20, 50, 100]"
  />
  <LhPagination :total="480" disabled />
</template>

vue

<script>
export default {
  data() {
    return { pageSize: 20 }
  },
}
</script>

<template>
  <LhPagination
    v-model:page-size="pageSize"
    :total="480"
    show-size-changer
    :page-sizes="[10, 20, 50, 100]"
  />
  <LhPagination :total="480" disabled />
</template>

Pagination API

Props

프로퍼티	설명	타입	기본값
total	전체 데이터 개수(필수)	`number`	—
pageSize	페이지당 항목 수	`number`	`10`
current	현재 페이지(`v-model:current`)	`number`	—
pageSizes	페이지당 항목 수 옵션	`number[]`	`() => [10, 20, 30, 40]`
showTotal	전체 개수 표시 여부	`boolean`	`false`
showSizeChanger	페이지당 항목 수 전환 표시 여부	`boolean`	`false`
showJumper	페이지 이동 입력 표시 여부	`boolean`	`false`
simple	간결 모드	`boolean`	`false`
disabled	비활성화 여부	`boolean`	`false`
sx	sx 빠른 레이아웃 속성	`LhSxProps`	—

Events

이벤트	설명	콜백 매개변수
update:current	현재 페이지 변경(v-model)	`(page: number)`
update:pageSize	페이지당 항목 수 변경(v-model:pageSize)	`(size: number)`
change	페이지 번호 변경	`(page: number)`
size-change	페이지당 항목 수 변경	`(size: number)`

접근성

루트 요소는 <nav aria-label="pagination">입니다
현재 페이지 버튼에 자동으로 aria-current="page"가 설정됩니다
각 페이지 번호 버튼과 이전/다음 페이지 버튼에는 고유한 aria-label이 있습니다(언어 팩 pagination.page / prev / next 사용), 기호만 있는 '‹' '›'는 aria-hidden으로 숨겨집니다
페이지 이동 입력에는 실제 <label>이 있습니다(언어 팩 pagination.goto 사용)
항목 수 전환은 네이티브 <select>이며 aria-label이 있습니다(언어 팩 pagination.sizeChangerLabel 사용)
생략 부호는 표시 전용 aria-hidden 요소로 키보드 내비게이션을 방해하지 않습니다

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다(packages/components/pagination/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 클릭하여 전체 정의를 펼쳐 볼 수 있습니다; 프로퍼티 설명은 위쪽 Props 표를 참고하세요):

LhPaginationProps

export interface LhPaginationProps {
  /** 전체 데이터 개수(필수) */
  total: number
  /** 페이지당 항목 수 */
  pageSize?: number
  /** 현재 페이지(v-model:current) */
  current?: number
  /** 페이지당 항목 수 옵션 */
  pageSizes?: number[]
  /** 전체 개수 표시 여부 */
  showTotal?: boolean
  /** 페이지당 항목 수 전환 표시 여부 */
  showSizeChanger?: boolean
  /** 페이지 이동 입력 표시 여부 */
  showJumper?: boolean
  /** 간결 모드 */
  simple?: boolean
  /** 비활성화 여부 */
  disabled?: boolean
  /** 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

Pagination 페이지 매김 ​

기본 사용법 ​

총개수와 항목 수 전환 ​

페이지 이동 ​

간결 모드 ​

제어되는 사용법 ​

페이지당 항목 수와 비활성화 ​

Pagination API ​

Props ​

Events ​

접근성 ​

타입 정의 ​