페이지네이션 (Pagination)

v-pagination 컴포넌트는 긴 데이터 뭉치를 사용자가 쉽게 볼 수 있도록 나누는 데 쓰입니다. 설정된 길이에 따라 페이지네이션 컴포넌트는 자동으로 확장됩니다. 현재 페이지를 관리하기 위해 간단히 v-model 속성을 사용하세요.

사용법

부모 컴포넌트가 충분히 크다면, 페이지네이션은 모든 페이지를 표시합니다.


API

v-pagination
이름
circle
디폴트
false
타입
boolean

페이지네이션 요소들의 형태를 둥글게

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
disabled
디폴트
false
타입
boolean

컴포넌트 비활성화

이름
length
디폴트
0
타입
number

페이지네이션 길이

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
next-icon
디폴트
'$vuetify.icons.next'
타입
string

"다음" 아이콘을 지정

이름
prev-icon
디폴트
'$vuetify.icons.prev'
타입
string

"이전" 아이콘을 지정

이름
total-visible
디폴트
undefined
타입
number | string

표시할 전체 페이지네이션 최대 값을 지정

이름
value
디폴트
0
타입
number

현재 선택된 페이지

예제

긴 경우 (Long)

페이지 버튼 개수가 부모 컨테이너를 초과하면, 페이지네이션 컴포넌트는 자동으로 리스트를 자릅니다.


제한 (Limit)

total-visible prop을 이용해서 표시되는 페이지 버튼의 개수를 수동으로 지정할 수 있습니다.


둥근 버튼 (Round)

페이지네이션 스타일에 둥근 페이지 버튼을 사용할 수 있습니다.


아이콘

이전/다음페이지 아이콘은 prev-iconnext-icon prop으로 커스터마이즈할 수 있습니다.


비활성화 (Disabled)

페이지네이션 아이템들은 수동으로 비활성활 할 수 있습니다.