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} />;
}