Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Pagination

긴 목록을 페이지네이션 형태로 나누어 보여주는 컴포넌트입니다. 페이지 버튼과 이동 버튼은 SUD Button을 사용하므로 키보드로도 조작할 수 있습니다.

import { Pagination } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

긴 목록을 페이지네이션 형태로 나누어 보여주고 싶을 때.

페이지를 나누어 데이터를 탐색할 때.

current와 onChange로 현재 페이지를 제어해야 할 때.

사용예제

Basic Usage

기본적인 사용 방법입니다.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item Count

한 페이지에 표시할 아이템 수를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Pagination, Input, Card, List } from 'sud-ui';

const PageSizePagination = () => {
  const [pageSize, setPageSize] = useState(10);
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center">
          <Input
            value={pageSize}
            onChange={(e) => setPageSize(Number(e.target.value))}
            type="number"
            min={1}
            max={100}
            placeholder="Number of items per page"
          />
        </div>
      </Card>
      <Card style={{ width: "100%" }} shadow="none">
        <List
          dataSource={Array.from(
            { length: 1000 },
            (_, i) => `Item ${i + 1}`
          ).slice((currentPage - 1) * pageSize, currentPage * pageSize)}
          split={true}
          gap={8}
        />
      </Card>
      <Pagination
        total={1000}
        pageSize={pageSize}
        current={currentPage}
        onChange={setCurrentPage}
        showPrevNext={true}
        showFirstLast={true}
        maxVisibleButtons={5}
        align="center"
      />
    </div>
  );
};

export default PageSizePagination;

Max Visible Buttons

maxVisibleButtons prop을 사용하여 한 번에 표시할 페이지 버튼의 수를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Pagination, Input, Card } from 'sud-ui';

const MaxVisiblePagination = () => {
  const [maxVisibleButtons, setMaxVisibleButtons] = useState(5);

  return (
    <div className="flex flex-col gap-[40px] w-full">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center">
          <Input
            value={maxVisibleButtons}
            onChange={(e) => setMaxVisibleButtons(Number(e.target.value))}
            type="number"
            min={1}
            max={100}
          />
        </div>
        <Pagination total={100} maxVisibleButtons={maxVisibleButtons} />
      </Card>
    </div>
  );
};

export default MaxVisiblePagination;

left

center

right

Align

페이지네이션의 정렬 위치를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Pagination, Radio, Card } from 'sud-ui';

const AlignPagination = () => {
  const [align, setAlign] = useState('left');
  
  const alignOptions = [
    { label: 'left', value: 'left' },
    { label: 'center', value: 'center' },
    { label: 'right', value: 'right' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center">
          <Radio.Group
            direction="horizontal"
            options={alignOptions}
            value={align}
            onChange={setAlign}
          />
        </div>
      </Card>
      <Pagination align={align} total={50} />
    </div>
  );
};

export default AlignPagination;

Customize Current Page Button

Customize All Buttons

Color Customization

페이지네이션의 색상을 커스텀할 수 있습니다.

import React from 'react';
import { Pagination, Typography } from 'sud-ui';

const CustomStylePagination = () => {
  return (
    <div className="flex flex-col gap-[40px] w-full">
      <div className="flex flex-col gap-[20px] w-full">
        <Typography pretendard="SB">
          Customize Current Page Button
        </Typography>
        <Pagination
          total={50}
          activeStyle={{
            colorType: "warning",
            shadow: "md"
          }}
        />
      </div>
      <div className="flex flex-col gap-[20px] w-full">
        <Typography pretendard="SB">Customize All Buttons</Typography>
        <Pagination
          total={50}
          defaultStyle={{
            colorType: "text",
            shadow: "none"
          }}
          activeStyle={{
            colorType: "default",
            borderColor: "blue",
            shadow: "none"
          }}
        />
      </div>
    </div>
  );
};

export default CustomStylePagination;

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

current

제어형 현재 페이지 번호입니다. total/pageSize 범위를 벗어난 값은 유효 범위로 보정됩니다.

number

defaultCurrent

비제어형일 때만 사용하는 초기 페이지 번호입니다.

number

total

전체 아이템 수입니다. 0 이하일 때도 페이지 1을 유지합니다.

number

align

페이지네이션 정렬 위치 ("left" | "center" | "right")

left

center

right

left

pageSize

한 페이지에 표시할 아이템 수입니다. 0 이하 값은 기본값 10으로 처리됩니다.

number

onChange

페이지 변경 시 호출되는 콜백 함수 ((page: number) => void)

(page: number) => void

showPrevNext

이전/다음 페이지 버튼 표시 여부

boolean

true

showFirstLast

첫 페이지/마지막 페이지 버튼 표시 여부

boolean

true

maxVisibleButtons

한 번에 표시할 최대 페이지 버튼 수

number

activeStyle

현재 페이지 버튼의 스타일 (PaginationStyle)

PaginationStyle

{ colorType: 'primary', shadow: 'sm' }

defaultStyle

기본 페이지 버튼의 스타일 (PaginationStyle)

PaginationStyle

{ colorType: 'default', shadow: 'sm' }

style

컨테이너 스타일

CSSProperties

{}

개인정보 처리방침

서비스 약관