1. Pagination

Pagination 컴포넌트는 페이지 번호를 표시하고 페이지 이동을 가능하게 해주는 컴포넌트입니다. 다양한 스타일, 색상, 모양 등을 커스터마이즈할 수 있습니다.

import { Pagination } from '@componique/react';

1.2. Usage

아래는 Pagination 컴포넌트의 기본 사용 예제입니다:

...

import { Pagination } from '@components/Pagination';

function Example() {
  const [currentPage, setCurrentPage] = useState(3);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };
  
  return (
    <Pagination
    currentPage={currentPage}
    totalPages={10}
    onPageChange={handlePageChange}
  />
  );
}

export default Example;

1.3. Changing the Variant of the Pagination

Pagination 컴포넌트는 다양한 모양으로 제공됩니다. 기본 모양은 circle입니다:

circle: 원형 버튼
square: 사각형 버튼

...

import { Pagination } from '@componique/react';

function Example() {
  const [currentPage, setCurrentPage] = useState(3);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };
  
  return (
  <>
    <Pagination
    currentPage={currentPage}
    totalPages={10}
    onPageChange={handlePageChange}
    />
    <Pagination
    variant="square"
    currentPage={currentPage}
    totalPages={10}
    onPageChange={handlePageChange}
    />
  </>
  );
}

export default Example;

1.4. Changing the Style of the Pagination

Pagination 컴포넌트는 다양한 스타일 타입으로 제공됩니다. 기본 스타일 타입은 filled입니다:

filled: 버튼의 배경색이 채워진 스타일
outlined: 버튼의 외곽선만 있는 스타일
outlined-focused: 포커스된 외곽선 스타일
filled-outlined: 채워진 외곽선 스타일

...

import { Pagination } from '@componique/react';

function Example() {
  const [currentPage, setCurrentPage] = useState(3);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };
  
  return (
  <>
    <Pagination
    styleType = "filled"
    currentPage={currentPage}
    totalPages={10}
    onPageChange={handlePageChange}
    />
    <Pagination
    styleType = "outlined"
    variant="square"
    currentPage={currentPage}
    totalPages={10}
    onPageChange={handlePageChange}
    />
    <Pagination
    styleType = "outlined-focused"
    currentPage={currentPage}
    totalPages={10}
    onPageChange={handlePageChange}
    />
    <Pagination
    styleType = "filled-outlined"
    currentPage={currentPage}
    totalPages={10}
    onPageChange={handlePageChange}
      />
  </>
  );
}
        
export default Example;

1.5. Changing the Color of the Pagination

Pagination 컴포넌트는 다양한 색상으로 제공됩니다. 기본 색상은 Basic입니다:

Basic: 기본 색상
Primary: 주요 색상
gray: 회색
Secondary: 보조 색상
Success: 성공 색상
Warning: 경고 색상
Danger: 위험 색상
White: 흰색

...

import { Pagination } from '@componique/react';

function Example() {
  const [currentPage, setCurrentPage] = useState(3);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };
  return (
    <>
      <Pagination
      styleType="filled"
      currentPage={currentPage}
      totalPages={10}
      color="Basic"
      onPageChange={handlePageChange}
      />
      <Pagination
      styleType="filled"
      currentPage={currentPage}
      totalPages={10}
      color="Primary"
      onPageChange={handlePageChange}
      />
      <Pagination
      styleType="filled"
      currentPage={currentPage}
      totalPages={10}
      color="gray"
      onPageChange={handlePageChange}
      />
      <Pagination
      styleType="filled"
      currentPage={currentPage}
      totalPages={10}
      color="Secondary"
      onPageChange={handlePageChange}
      />
      <Pagination
      styleType="filled"
      currentPage={currentPage}
      totalPages={10}
      color="Success"
      onPageChange={handlePageChange}
      />
      <Pagination
      styleType="filled"
      currentPage={currentPage}
      totalPages={10}
      color="Warning"
      onPageChange={handlePageChange}
      />
      <Pagination
      styleType="filled"
      currentPage={currentPage}
      totalPages={10}
      color="Danger"
      onPageChange={handlePageChange}
      />
      <Pagination
      styleType="filled"
      currentPage={currentPage}
      totalPages={10}
      color="White"
      onPageChange={handlePageChange}
      />
    </>
  );
}

export default Example;

1.6. Props

Pagination 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`currentPage`	현재 페이지를 설정합니다.	`number`	N/A
`totalPages`	전체 페이지 수를 설정합니다.	`number`	N/A
`variant`	페이지 버튼의 모양을 설정합니다.	`"circle" \| "square"`	`"circle"`
`styleType`	페이지 버튼의 스타일 타입을 설정합니다.	`"filled" \| "outlined" \| "outlined-focused" \| "filled-outlined"`	`"filled"`
`color`	페이지 버튼의 색상을 설정합니다.	`"Basic" \| "Primary" \| "gray" \| "Secondary" \| "Success" \| "Warning" \| "Danger" \| "White"`	`"Primary"`
`onPageChange`	페이지 변경 시 호출되는 함수입니다.	`(page: number) => void`	N/A
`showFirstLastButtons`	첫 페이지와 마지막 페이지로 이동하는 버튼을 표시할지 여부를 설정합니다.	`boolean`	`false`
`boundaryRange`	첫/마지막 페이지 근처에 표시할 페이지 수를 설정합니다.	`number`	N/A
`siblingRange`	현재 페이지를 중심으로 표시할 페이지 수를 설정합니다.	`number`	N/A
`disabled`	페이지네이션 전체를 비활성화할지 여부를 설정합니다.	`boolean`	`false`

1.7. Full Example

import { Pagination } from '@componique/react';

        function Example() {
          const [currentPage, setCurrentPage] = useState(3);
        
          const handlePageChange = (page: number) => {
            setCurrentPage(page);
          };
          
          return (
          <>
            <Pagination
            variant="outlined-focused"
            currentPage={currentPage}
            totalPages={10}
            onPageChange={handlePageChange}
            styleType="filled"
            color="Success"
            showFirstLastButtons={true}
            />
          </>
          );
        }
        
        export default Example;