Paginationページネーション

複数ページにまたがるデータやコンテンツのページ切り替えを行うためのコンポーネントです。

更新 2025/5/23

サンプル

countプロパティでページ数を指定します。現在ページの前後2ページまで表示され、それ以上は省略記号（…）で表示されます。

import { Pagination } from "@serendie/ui";
import { useState } from "react";

export function BasicSample() {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      count={10}
      page={page}
      onPageChange={({ page }) => setPage(page)}
    />
  );
}

表示数の調整

siblingCountプロパティを調整することで、現在ページの前後に表示するページ数を変更できます。この例では4に設定しているため、より多くのページ番号が表示されます。

import { Pagination } from "@serendie/ui";

export function WithMoreSiblingsSample() {
  return <Pagination count={100} siblingCount={4} />;
}