Components

Pagination

긴 목록을 페이지로 나눕니다. Table과 짝으로 씁니다.

코드 보기
<div class="tn-pgn">
  <button>‹</button><button class="on">1</button><button>2</button>
  …<button>›</button>
</div>

Variants

이름설명미리보기
기본‹ 숫자 › + 생략(…)

Guidelines

✓ Do
  • 현재 페이지 = 검정 반전
  • 양 끝 이동은 ‹ › 만 (« » 금지)
  • 7버튼 초과 시 … 생략
✕ Don't
  • 무한 스크롤과 혼용 금지
  • 페이지당 개수 셀렉트를 붙일 땐 좌측에

Specification

속성토큰/값비고
버튼30px / 6px radius
on--foreground 반전