페이지네이션 (Pagination)
v-pagination 컴포넌트는 긴 데이터 뭉치를 사용자가 쉽게 볼 수 있도록 나누는 데 쓰입니다. 설정된 길이에 따라 페이지네이션 컴포넌트는 자동으로 확장됩니다. 현재 페이지를 관리하기 위해 간단히 v-model 속성을 사용하세요.
API
이름
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-icon 과 next-icon prop으로 커스터마이즈할 수 있습니다.
비활성화 (Disabled)
페이지네이션 아이템들은 수동으로 비활성활 할 수 있습니다.