Pagination

원본: projects/skill-lens/design/components/Pagination/README.md

상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗

쪽 넘김: 범위와 전체 수, 이전과 다음, 쪽 번호. 폰은 이전과 다음만

견본만 새 창으로

표 아래의 쪽 넘김입니다. 왼쪽 범위와 전체 수, 오른쪽 이전, 쪽 번호, 다음.

쓰는 곳

50행이 넘는 표.

구성(화면이 넘겨줄 것)

전체 수, 쪽 크기(기본 20), 현재 쪽, 이동 처리.

규칙

• 범위 글자("41~60 / 1,248명")가 쪽 번호보다 먼저입니다.
• 쪽 번호는 처음 넷 + 줄임 + 마지막 하나. 현재 쪽은 검정 채움.
• 폰은 범위 글자 + 이전과 다음만.
• 쪽 크기 바꾸기는 표 위 도구 줄에.

접근성

• nav, 현재 쪽은 aria-current="page".

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Navigation" height=200 width=820 subtitle="쪽 넘김: 범위와 전체 수, 이전과 다음, 쪽 번호. 폰은 이전과 다음만" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.w{max-width:720px;background:var(--surface-raised);border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--border)}.phone{width:360px;margin-top:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--border)}.phone .sl-pager__num,.phone .sl-pager__gap{display:none}</style>
<div class="sl w"><nav class="sl-pager" aria-label="쪽 넘김"><span class="sl-pager__count"><b>1~20</b> / 1,248명</span><div class="sl-pager__nav"><button class="sl-pager__btn sl-pager__btn--arrow" aria-label="이전 쪽" disabled><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button><button class="sl-pager__btn sl-pager__num" aria-current="page">1</button><button class="sl-pager__btn sl-pager__num">2</button><button class="sl-pager__btn sl-pager__num">3</button><button class="sl-pager__btn sl-pager__num">4</button><span class="sl-pager__gap">…</span><button class="sl-pager__btn sl-pager__num">63</button><button class="sl-pager__btn sl-pager__btn--arrow" aria-label="다음 쪽"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button></div></nav></div>
<div class="sl phone"><nav class="sl-pager" aria-label="쪽 넘김"><span class="sl-pager__count"><b>21~40</b> / 1,248명</span><div class="sl-pager__nav"><button class="sl-pager__btn sl-pager__btn--arrow" aria-label="이전 쪽"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button><button class="sl-pager__btn sl-pager__btn--arrow" aria-label="다음 쪽"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button></div></nav></div>

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.