Ellipsis Pagination

ページ数が多い時に自動的に省略記号(...)を表示するPaginationコンポーネント。現在ページ周辺とページ境界のページ番号のみを表示します。

npx shadcn@latest add https://imaimai-ui.vercel.app/r/ellipsis-pagination.json

実際に動作するコンポーネントです。インタラクションを試してみてください。

ページ数が少ない場合

省略記号が表示されず、すべてのページ番号が表示されます。

現在のページ:

1

ページ数が多い場合

省略記号(...)が表示され、現在ページ周辺とページ境界のみが表示されます。

現在のページ:

5

siblingCount

現在ページの前後に表示するページ数を指定します。この例では2に設定。

現在のページ:

5

boundaryCount

最初と最後に表示するページ数を指定します。この例では2に設定。

現在のページ:

5

edgeCount

端(最初または最後のページ)にいる時に表示するページ数を指定します。この例では3に設定。

現在のページ:

1
imaimai UI