Caroa UI

Pagination

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

インポート

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

基本的な使い方

Loading...
<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 を使用します。

Loading...
<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 プロパティでサイズを変更できます。

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

無効状態

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

Loading...
<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>

ページ番号のみ

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

Loading...
<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

PropTypeDefaultDescription
hrefstring-リンク先URL
isActivebooleanfalse現在のページかどうか
disabledbooleanfalse無効状態
size'default' | 'sm' | 'lg''default'サイズ

PaginationPrevious / PaginationNext

PropTypeDefaultDescription
hrefstring-リンク先URL
disabledbooleanfalse無効状態
size'default' | 'sm' | 'lg''default'サイズ

On this page