# Component/Pagination/Pagination

> Props: component-pagination-pagination.props.txt

## Examples


### Align

```tsx
{
  args: {
    totalPages: 5
  },
  render: args => {
    const [currentPage, setCurrentPage] = useState<number>(args.currentPage ?? 1);
    return <Stack direction='column' gap={8}>
        <Stack direction='column' gap={8}>
          <BaseText>undefined</BaseText>
          <Pagination {...args} align={undefined} currentPage={currentPage} onChangePage={setCurrentPage} />
        </Stack>
        <Stack direction='column' gap={8}>
          <BaseText>flex-start</BaseText>
          <Pagination {...args} align={'flex-start'} currentPage={currentPage} onChangePage={setCurrentPage} />
        </Stack>
        <Stack direction='column' gap={8}>
          <BaseText>center</BaseText>
          <Pagination {...args} align={'center'} currentPage={currentPage} onChangePage={setCurrentPage} />
        </Stack>
        <Stack direction='column' gap={8}>
          <BaseText>flex-end</BaseText>
          <Pagination {...args} align={'flex-end'} currentPage={currentPage} onChangePage={setCurrentPage} />
        </Stack>
      </Stack>;
  }
}
```

### Background Color

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [currentPage, setCurrentPage] = useState<number>(args.currentPage ?? 1);
    return <div style={{
      backgroundColor: colors.gray30,
      padding: 20
    }}>
        <Pagination {...args} currentPage={currentPage} onChangePage={setCurrentPage} />
      </div>;
  }
}
```

### Background Color Disabled

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [currentPage, setCurrentPage] = useState<number>(args.currentPage ?? 1);
    return <div style={{
      backgroundColor: colors.gray30,
      padding: 20
    }}>
        <Pagination {...args} currentPage={currentPage} onChangePage={setCurrentPage} />
      </div>;
  },
  args: {
    totalPages: 20,
    disabled: true
  }
}
```

### Base

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [currentPage, setCurrentPage] = useState<number>(args.currentPage ?? 1);
    return <Pagination {...args} currentPage={currentPage} onChangePage={setCurrentPage} />;
  }
}
```

### Custom Boundary Count

맨처음/맨끝 표시할 페이지 버튼 갯수를 커스텀할 수 있습니다.

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [currentPage, setCurrentPage] = useState<number>(args.currentPage ?? 1);
    return <Pagination {...args} currentPage={currentPage} onChangePage={setCurrentPage} />;
  },
  args: {
    totalPages: 100,
    boundaryCount: 2
  },
  parameters: {
    docs: {
      description: {
        story: '맨처음/맨끝 표시할 페이지 버튼 갯수를 커스텀할 수 있습니다.'
      }
    }
  }
}
```

### Custom Sibling Count

현재페이지 기준 좌/우 표시할 페이지 버튼 갯수를 커스텀할 수 있습니다.

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [currentPage, setCurrentPage] = useState<number>(args.currentPage ?? 1);
    return <Pagination {...args} currentPage={currentPage} onChangePage={setCurrentPage} />;
  },
  args: {
    totalPages: 20,
    siblingCount: 1
  },
  parameters: {
    docs: {
      description: {
        story: '현재페이지 기준 좌/우 표시할 페이지 버튼 갯수를 커스텀할 수 있습니다.'
      }
    }
  }
}
```

### Disabled

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [currentPage, setCurrentPage] = useState<number>(args.currentPage ?? 1);
    return <Pagination {...args} currentPage={currentPage} onChangePage={setCurrentPage} />;
  },
  args: {
    totalPages: 20,
    disabled: true
  }
}
```

### Hide Arrow Button

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [currentPage, setCurrentPage] = useState<number>(args.currentPage ?? 1);
    return <Pagination {...args} currentPage={currentPage} onChangePage={setCurrentPage} />;
  },
  args: {
    totalPages: 20,
    showArrowButton: false
  }
}
```

### Min Width Example

모바일 규격과 같이 작은 해상도일 경우 최소 규격으로 노출할 수 있습니다.

```tsx
{
  args: {
    totalPages: 15
  },
  render: args => {
    const [currentPage, setCurrentPage] = useState<number>(args.currentPage ?? 1);
    return <Pagination {...args} currentPage={currentPage} onChangePage={setCurrentPage} />;
  },
  args: {
    totalPages: 15,
    siblingCount: 1,
    showArrowButton: false
  },
  parameters: {
    docs: {
      description: {
        story: '모바일 규격과 같이 작은 해상도일 경우 최소 규격으로 노출할 수 있습니다.'
      }
    }
  }
}
```