Pagination

페이지 번호가 늘어선 줄. 각각은 진짜 Button입니다.

import { Pagination } from 'neba';

<Pagination count={24} page={page} onPageChange={setPage} showEdges />;

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	'text'	쉬고 있는 페이지 버튼의 무게. 현재 페이지는 언제나 solid입니다 — 읽지 않고도 보여야 하는 유일한 정보이고, 기본값이 text인 이유도 그것입니다. 채워진 버튼 아홉 개가 한 줄에 있으면 아홉 개 모두가 주된 액션이라는 뜻이 됩니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	버튼의 높이와 타입 스케일. 실제로 Button이므로 옆에 놓인 같은 size의 버튼과 줄이 맞습니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'compact'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
count *	number	—	전체 페이지 수. 둘보다 적으면 아무것도 그리지 않습니다 — 할 일이 없다고 광고하는 컨트롤은 컨트롤이 아닙니다
page	number	—	현재 페이지(1부터). controlled
defaultPage	number	1	처음 페이지
onPageChange	(page: number) => void	—	페이지가 바뀔 때
siblingCount	number	1	현재 페이지 양옆에 언제나 보이는 페이지 수
boundaryCount	number	1	양 끝에 언제나 보이는 페이지 수. 0이면 첫 페이지와 마지막 페이지가 빠지고 창만 남습니다
showEdges	boolean	false	맨 앞 / 맨 뒤로 건너뛰는 버튼
showArrows	boolean	true	이전 / 다음 버튼
disabled	boolean	false	사용 불가. 줄 전체가 반응하지 않습니다
label	string	'Pagination'	nav 랜드마크의 접근성 이름
pageLabel	(page: number) => string	—	페이지 버튼의 접근성 이름. 기본값은 `Page ${page}`
previousLabel	string	'Previous page'	이전 버튼의 접근성 이름
nextLabel	string	'Next page'	다음 버튼의 접근성 이름
firstLabel	string	'First page'	맨 앞 버튼의 접근성 이름
lastLabel	string	'Last page'	맨 뒤 버튼의 접근성 이름

예시

Variant

variant는 페이지 버튼이 쉬고 있을 때의 모습입니다. 현재 페이지는 언제나 채워집니다 — 읽지 않고도 보여야 하는 유일한 정보이기 때문입니다.

기본값이 홀로 있는 Button과 달리 text인 것도 그 때문입니다. 한 줄에 채워진 버튼이 아홉 개 있으면 아홉 개 모두가 주된 액션이라는 뜻이 됩니다.

import { Pagination, Typography } from 'neba';

/**
 * `variant` is how the pages look *at rest*. The current page is always filled,
 * whatever the row's resting variant is — it is the one thing here that has to
 * be legible without being read.
 */
export default function PaginationVariants() {
  return (
    <div className="flex flex-col gap-5">
      {(['text', 'outline', 'solid'] as const).map((variant) => (
        <div key={variant} className="flex flex-col gap-1">
          <Typography level="caption">variant="{variant}"</Typography>
          <Pagination count={9} defaultPage={4} variant={variant} />
        </div>
      ))}
    </div>
  );
}

어떤 페이지를 보여 줄지

import { Pagination, Typography } from 'neba';

/**
 * The window slides toward whichever end it is near rather than being clipped by
 * it, so the row keeps the same number of slots on every page. Which slots are
 * pages and which are ellipses changes; how many there are does not — otherwise
 * stepping from page 1 to page 2 would relayout the row and move every button
 * out from under the pointer that just pressed one.
 */
export default function PaginationRange() {
  return (
    <div className="flex flex-col gap-5">
      {[1, 2, 10, 19, 20].map((page) => (
        <div key={page} className="flex flex-col gap-1">
          <Typography level="caption">page={page}</Typography>
          <Pagination count={20} page={page} showArrows={false} />
        </div>
      ))}

      <div className="flex flex-col gap-1">
        <Typography level="caption">
          siblingCount={2} · boundaryCount={2}
        </Typography>
        <Pagination count={20} page={10} siblingCount={2} boundaryCount={2} showArrows={false} />
      </div>
    </div>
  );
}

크기

import { Pagination } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function PaginationSizes() {
  return (
    <div className="flex flex-col gap-4">
      {SIZES.map((size) => (
        <Pagination key={size} size={size} count={9} defaultPage={4} />
      ))}
    </div>
  );
}

줄의 길이는 변하지 않습니다

창이 끝에 가까워지면 잘리는 대신 그쪽으로 미끄러집니다. 그래서 1페이지는 1 2 3 4 5 … 20이고 10페이지는 1 … 9 10 11 … 20입니다 — 어떤 칸이 페이지이고 어떤 칸이 말줄임인지는 바뀌지만, 칸의 개수는 바뀌지 않습니다.

그러지 않으면 1페이지에서 2페이지로 넘어갈 때 줄이 다시 배치되고, 방금 버튼을 누른 포인터 아래에서 모든 버튼이 빠져나갑니다.

한 페이지만 숨겨질 때는 말줄임 대신 그 페이지를 그립니다. 1 … 3 … 9는 자기가 대신한 숫자보다 넓은 기호 뒤에 숫자 하나를 숨긴 것입니다.

진짜 Button입니다

이 줄에 있는 모든 버튼은 Button이고, 그것이 요점입니다. 페이지네이션은 새로운 종류의 컨트롤이 아니라 서로를 알고 있는 버튼들이 한 줄에 놓인 것입니다.

컴포넌트를 재사용하므로 아크릴 표면, 누를 때 즉각적이고 뗄 때 느린 하우스 시그니처, 포커스 링, 그리고 앞으로 그 셋에 생길 모든 변화를 공짜로 물려받습니다. lg 페이지네이션이 옆의 lg 버튼과 줄이 맞는 이유도 같습니다 — 실제로 그것이니까요.

페이지가 하나면 아무것도 그리지 않습니다

혼자 비활성화된 "1"을 그리는 줄은 자기가 할 일이 없다고 광고하는 컨트롤입니다.

접근성

마크업은 <ul>을 감싼 <nav>입니다. 스크린 리더가 들어야 하는 것이 그것이기 때문입니다: 건너뛸 수 있는 이름 붙은 랜드마크, 그 안에 길이가 곧 페이지 범위를 말해 주는 목록, 그리고 현재 위치를 표시하는 aria-current="page".

말줄임은 버튼이 아니고 비활성화된 버튼도 아닙니다. 마침 쓸 수 없는 컨트롤이 아니라 문장 부호입니다.

label, pageLabel, previousLabel처럼 접근성 이름은 전부 prop으로 열려 있습니다. 한 화면에 페이지네이션이 여러 개라면 label로 각각이 무엇의 페이지인지 밝혀 주세요.