Pagination

큰 결과 목록을 직접 이동 가능한 페이지와 경계 버튼으로 줄여 보여 줍니다.

용법

간결한 표시

가로 공간이 좁을 때 필요한 제어 요소만 표시합니다.

<!-- Pagination / Compact -->
<script setup lang="ts">
import { PaginationRoot, PaginationFirst, PaginationPrevious, PaginationItem, PaginationNext, PaginationLast } from '@sectile/vue/pagination'
</script>

<template>
  <PaginationRoot :total="240" :default-items-per-page="20" v-slot="{ items }">
    <PaginationFirst>First</PaginationFirst>
    <PaginationPrevious>Previous</PaginationPrevious>
    <template v-for="item in items.filter(item => item.type !== 'control')" :key="JSON.stringify(item)">
      <span v-if="item.type === 'ellipsis'" aria-hidden="true">…</span>
      <PaginationItem v-else :item="item">{{ item.page }}</PaginationItem>
    </template>
    <PaginationNext>Next</PaginationNext>
    <PaginationLast>Last</PaginationLast>
  </PaginationRoot>
</template>

페이지당 항목 수

페이지당 항목 수를 바꾸고 필요하면 유효한 첫 페이지로 이동합니다.

<!-- Pagination / Page Size -->
<script setup lang="ts">
import { PaginationRoot, PaginationFirst, PaginationPrevious, PaginationItem, PaginationNext, PaginationLast } from '@sectile/vue/pagination'
</script>

<template>
  <PaginationRoot :total="240" :default-items-per-page="20" v-slot="{ items }">
    <PaginationFirst>First</PaginationFirst>
    <PaginationPrevious>Previous</PaginationPrevious>
    <template v-for="item in items.filter(item => item.type !== 'control')" :key="JSON.stringify(item)">
      <span v-if="item.type === 'ellipsis'" aria-hidden="true">…</span>
      <PaginationItem v-else :item="item">{{ item.page }}</PaginationItem>
    </template>
    <PaginationNext>Next</PaginationNext>
    <PaginationLast>Last</PaginationLast>
  </PaginationRoot>
</template>

페이지 번호만 표시

페이지 번호만 표시하는 간결한 탐색 구성을 보여 줍니다.

<!-- Pagination / Pages Only -->
<script setup lang="ts">
import { PaginationRoot, PaginationFirst, PaginationPrevious, PaginationItem, PaginationNext, PaginationLast } from '@sectile/vue/pagination'
</script>

<template>
  <PaginationRoot :total="240" :default-items-per-page="20" v-slot="{ items }">
    <PaginationFirst>First</PaginationFirst>
    <PaginationPrevious>Previous</PaginationPrevious>
    <template v-for="item in items.filter(item => item.type !== 'control')" :key="JSON.stringify(item)">
      <span v-if="item.type === 'ellipsis'" aria-hidden="true">…</span>
      <PaginationItem v-else :item="item">{{ item.page }}</PaginationItem>
    </template>
    <PaginationNext>Next</PaginationNext>
    <PaginationLast>Last</PaginationLast>
  </PaginationRoot>
</template>

외부 상태 관리

현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.

<!-- Pagination / Controlled -->
<script setup lang="ts">
import { PaginationRoot, PaginationFirst, PaginationPrevious, PaginationItem, PaginationNext, PaginationLast } from '@sectile/vue/pagination'
</script>

<template>
  <PaginationRoot :total="240" :default-items-per-page="20" v-slot="{ items }">
    <PaginationFirst>First</PaginationFirst>
    <PaginationPrevious>Previous</PaginationPrevious>
    <template v-for="item in items.filter(item => item.type !== 'control')" :key="JSON.stringify(item)">
      <span v-if="item.type === 'ellipsis'" aria-hidden="true">…</span>
      <PaginationItem v-else :item="item">{{ item.page }}</PaginationItem>
    </template>
    <PaginationNext>Next</PaginationNext>
    <PaginationLast>Last</PaginationLast>
  </PaginationRoot>
</template>

예시

긴 범위

현재 위치 주변의 페이지 번호만 표시하며 큰 결과 목록을 이동합니다.

<!-- Pagination / Long Range -->
<script setup lang="ts">
import { PaginationRoot, PaginationFirst, PaginationPrevious, PaginationItem, PaginationNext, PaginationLast } from '@sectile/vue/pagination'
</script>

<template>
  <PaginationRoot :total="240" :default-items-per-page="20" v-slot="{ items }">
    <PaginationFirst>First</PaginationFirst>
    <PaginationPrevious>Previous</PaginationPrevious>
    <template v-for="item in items.filter(item => item.type !== 'control')" :key="JSON.stringify(item)">
      <span v-if="item.type === 'ellipsis'" aria-hidden="true">…</span>
      <PaginationItem v-else :item="item">{{ item.page }}</PaginationItem>
    </template>
    <PaginationNext>Next</PaginationNext>
    <PaginationLast>Last</PaginationLast>
  </PaginationRoot>
</template>

API

Vue 패키지: @sectile/vue/pagination

컴포넌트

PaginationRoot
PaginationItem
PaginationFirst
PaginationPrevious
PaginationNext
PaginationLast

Props

`PaginationRootProps`

as: 타입PrimitiveAs기본값'nav'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultItemsPerPage: 타입number기본값10
컴포넌트가 관리하는 초기 페이지당 항목 수입니다.
defaultValue: 타입number기본값1
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
getControlLabel: 타입(control: PaginationControl) => string기본값undefined
각 페이지 이동 버튼에 제공할 접근 가능한 이름을 만드는 함수입니다.
getPageLabel: 타입(page: number) => string기본값undefined
각 페이지 선택지에 제공할 접근 가능한 이름을 만드는 함수입니다.
itemsPerPage: 타입number기본값undefined
한 페이지에 표시할 외부 제어 항목 수입니다.
label: 타입string기본값'Pagination'
보조 기술이 읽는 컨트롤 이름입니다.
modelValue: 타입number기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
readonly: 타입boolean기본값false
값 확인만 허용하는 읽기 전용 상태 여부입니다.
showControls: 타입boolean기본값true
처음·이전·다음·마지막 이동 버튼을 포함할지 여부입니다.
showEdges: 타입boolean기본값true
첫 페이지와 마지막 페이지 번호를 항상 표시할지 여부입니다.
siblingCount: 타입number기본값1
현재 페이지 양옆에 표시할 페이지 수입니다.
total: 타입number기본값필수
페이지 나누기가 나타내는 전체 레코드 수입니다.

`PaginationItemProps`

as: 타입PrimitiveAs기본값'button'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
item: 타입PaginationViewItem기본값필수
이 파트가 렌더링할 페이지 항목입니다.

슬롯

`PaginationRootSlotProps`

items: 타입readonly PaginationViewItem[]
현재 계산된 항목 컬렉션입니다.
itemsPerPage: 타입number
현재 페이지당 레코드 수입니다.
page: 타입number
1부터 시작하는 현재 페이지 번호입니다.
pageCount: 타입number
사용 가능한 전체 페이지 수입니다.
range: 타입PaginationItemRange
현재 시작값과 종료값입니다.

`PaginationItemSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
item: 타입PaginationViewItem
현재 페이지 항목입니다.
selected: 타입boolean
현재 선택된 항목인지 여부입니다.

이벤트

`PaginationRoot`

update:itemsPerPage: 페이로드number
새 페이지당 항목 수를 요청할 때 발생합니다.
update:modelValue: 페이로드number
컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

`PaginationPageLabelResolver`

type PaginationPageLabelResolver = NonNullable<PaginationRootProps['getPageLabel']>

`PaginationControlLabelResolver`

type PaginationControlLabelResolver = NonNullable<PaginationRootProps['getControlLabel']>

`PaginationValueChangeHandler`

type PaginationValueChangeHandler = (value: number) => void

`PaginationItemsPerPageChangeHandler`

type PaginationItemsPerPageChangeHandler = (value: number) => void

파트

공통 범위: [data-scope="pagination"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`first`	`[data-part="first"]`	첫 페이지로 이동합니다.	—
`previous`	`[data-part="previous"]`	이전 항목이나 페이지로 이동합니다.	—
`item`	`[data-part="item"]`	선택하거나 실행할 수 있는 항목 하나입니다.	—
`next`	`[data-part="next"]`	다음 항목이나 페이지로 이동합니다.	—
`last`	`[data-part="last"]`	마지막 페이지로 이동합니다.	—

키보드 동작

키	동작
`Tab`	버튼이나 링크로 제공되는 페이지 이동 컨트롤 사이를 이동합니다.
`Enter` / `Space`	포커스된 페이지나 경계 이동 컨트롤을 실행합니다.
`Home` / `End`	터미널에서는 첫 번째 또는 마지막 페이지로 이동합니다.

접근성

페이지 링크나 버튼이 기본 실행 의미와 현재 페이지 속성을 함께 제공합니다.

Pagination ​

용법 ​

간결한 표시 ​

페이지당 항목 수 ​

페이지 번호만 표시 ​

외부 상태 관리 ​

예시 ​

긴 범위 ​

API ​

Props ​

PaginationRootProps ​

PaginationItemProps ​

슬롯 ​

PaginationRootSlotProps ​

PaginationItemSlotProps ​

이벤트 ​

PaginationRoot ​

기타 타입 ​

PaginationPageLabelResolver ​

PaginationControlLabelResolver ​

PaginationValueChangeHandler ​

PaginationItemsPerPageChangeHandler ​

파트 ​

키보드 동작 ​

접근성 ​