Pagination

목록·테이블의 페이지를 이동하는 컴포넌트입니다. nav · ul 시맨틱 구조와 aria-current="page"로 접근성을 지원합니다.

기본

이전·다음 버튼과 페이지 번호로 구성합니다.

현재 페이지: 1

minimal로 테두리 없는 가벼운 스타일을 적용합니다.

size로 항목 스케일을 조절합니다.

round로 pill 형태의 페이지 버튼을 적용합니다.

페이지가 많을 때 중간 구간을 생략합니다.

simple로 이전·다음과 현재/전체 페이지만 표시합니다.

pagination_total · pagination_jumper와 함께 테이블 하단 툴바를 구성합니다.

총 128건

이동 페이지

pagination_align-center · pagination_align-end로 가운데·우측 정렬합니다.

첫·마지막 페이지에서는 이전·다음 버튼을 비활성화합니다.

Prop	타입	기본값	설명
`current`	number	—	현재 페이지 (제어, v-model:current)
`default-current`	number	1	초기 페이지 (비제어)
`total`	number	1	전체 항목 수
`page-size`	number	10	페이지당 항목 수
`simple`	boolean	false	pagination_simple — 이전·다음+현재/전체
`minimal`	boolean	false	pagination_minimal — 테두리 없음
`size`	'sm' \| 'md' \| 'lg'	md	pagination_sm · pagination_lg
`round`	boolean	false	pagination_round — pill 버튼
`aria-label`	string	페이지 이동	nav aria-label
`ripple`	boolean	true	클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성

이벤트	페이로드	설명
`update:current`	number	v-model:current — 페이지 변경
`change`	number	페이지 변경 시

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`pagination · pagination_list · pagination_item`	루트·목록·항목
`pagination_link · pagination_prev · pagination_next`	페이지·이전·다음 버튼
`pagination_ellipsis`	생략 표시
`pagination_simple · pagination_minimal · pagination_round`	스타일 변형
`pagination_sm · pagination_lg`	크기
`pagination_align-center · pagination_align-end`	정렬
`pagination_wrap · pagination_total · pagination_jumper`	툴바 조합
`is-active · is-disabled`	현재·비활성 페이지
`aria-current="page"`	현재 페이지 표시
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

토큰	기본값	설명
`--pagination-gap · --pagination-item-size`	—	간격·버튼 크기
`--pagination-font-size`	—	글자 크기