Skip to main content

Pagination

MSK Pagination은 페이지 번호 버튼을 생성하는 primitive입니다. data-current / data-total 기준으로 prev/next와 생략(…)을 포함해 렌더링합니다.

Preview​

Data API​

<nav data-msk-pagination data-current="3" data-total="12"></nav>

data-msk-pagination-window으로 한 번에 보일 번호 개수를 조절합니다(기본 5).

JavaScript API​

window.MSK.ui.pagination.setPage(root, 5);

Events​

root.addEventListener('msk:pagination-change', (event) => {
  loadPage(event.detail.page);
});

Accessibility​

  • role="navigation" + aria-label="Pagination", 현재 페이지에 aria-current="page".
  • prev/next 버튼은 양 끝에서 자동 비활성화됩니다.
  • 페이지 이동 자체는 이벤트로 위임하므로 fetch/라우팅에 연결하세요.