페이지네이션

목록이 길어 끊어 보여야 할 때. 무한 스크롤은 ‘전체 몇 건인지’ 감이 없어 업무 화면에는 부적합합니다.

코드

<nav class="jt-pagination" aria-label="페이지 탐색">
  <button class="jt-page" aria-label="이전 페이지" disabled>‹</button>
  <button class="jt-page" aria-current="page">1</button>
  <button class="jt-page">2</button>
  <button class="jt-page" aria-label="다음 페이지">›</button>
</nav>

하지 말 것

• ‹ ›만 두고 페이지 번호를 없애지 마세요. 몇 페이지인지 모르면 되돌아갈 수 없습니다.

접근성

• 현재 페이지에 aria-current="page"
• 화살표 버튼에 aria-label
• <nav aria-label="페이지 탐색">으로 감쌉니다

앱에서 모양 바꾸기

이 컴포넌트는 별도 노브가 없습니다. 크기·색이 다르게 필요하면 도움말로 요청하세요 — 토큰에 먼저 추가한 뒤 씁니다.

관련