Ellipsis Pagination
ページ数が多い時に自動的に省略記号(...)を表示するPaginationコンポーネント。現在ページ周辺とページ境界のページ番号のみを表示します。
npx shadcn@latest add https://imaimai-ui.vercel.app/r/ellipsis-pagination.json実際に動作するコンポーネントです。インタラクションを試してみてください。
ページ数が少ない場合
省略記号が表示されず、すべてのページ番号が表示されます。
現在のページ:
1ページ数が多い場合
省略記号(...)が表示され、現在ページ周辺とページ境界のみが表示されます。
現在のページ:
5siblingCount
現在ページの前後に表示するページ数を指定します。この例では2に設定。
現在のページ:
5boundaryCount
最初と最後に表示するページ数を指定します。この例では2に設定。
現在のページ:
5edgeCount
端(最初または最後のページ)にいる時に表示するページ数を指定します。この例では3に設定。
現在のページ:
1