Pagination

ページネーションコンポーネント。ページ間のナビゲーションを提供します。

インポート

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from '@caroainc/ui-components/client'

基本的な使い方

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

省略記号付き

多数のページがある場合は PaginationEllipsis を使用します。

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">10</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

サイズ

size プロパティでサイズを変更できます。

{/* Small */}
<PaginationLink href="#" size="sm">1</PaginationLink>
 
{/* Default */}
<PaginationLink href="#" size="default">1</PaginationLink>
 
{/* Large */}
<PaginationLink href="#" size="lg">1</PaginationLink>

無効状態

最初や最後のページでは disabled を使用してナビゲーションを無効化します。

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" disabled />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

ページ番号のみ

前後ボタンなしでページ番号のみを表示することもできます。

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">4</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">5</PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>

Props

PaginationLink

Prop	Type	Default	Description
`href`	`string`	`-`	リンク先URL
`isActive`	`boolean`	`false`	現在のページかどうか
`disabled`	`boolean`	`false`	無効状態
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	サイズ

PaginationPrevious / PaginationNext

Prop	Type	Default	Description
`href`	`string`	`-`	リンク先URL
`disabled`	`boolean`	`false`	無効状態
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	サイズ

Pagination

On this page