ページネーション

ページネーションコンポーネントを使用すると、アクティブなページを表示し、複数のページ間を移動できます。

インストール

npx nextui-cli@latest add pagination

上記のコマンドは、個別のインストール専用です。 @nextui-org/reactがグローバルにインストールされている場合は、このステップをスキップできます。

インポート

NextUIは、ページネーション関連の3つのコンポーネントをエクスポートします。

• Pagination：ページネーションを表示するためのメインコンポーネント。
• PaginationItem：ページネーションアイテムを表示するための内部コンポーネント。
• PaginationCursor：現在のページを表示するための内部アイテムコンポーネント。

使用方法

無効

サイズ

色

バリアント

variant プロパティを使用して、ページネーションアイテムのスタイルを変更できます。

コントロール付き

showControls を true に設定すると、next ボタンと previous ボタンが表示されます。

ページネーションループ

ページネーションをループさせたい場合は、loop プロパティを true に設定します。カーソルは最終ページに到達すると最初のページに戻り、その逆も同様です。

初期ページの変更

initialPage プロパティを設定することで、初期ページを変更できます。

コンパクトなページネーション

ページネーションの縮小版を表示するには、isCompact プロパティを true に設定します。

影付き

showShadow プロパティを使用して、アクティブなページアイテムの下に影を表示できます。

制御された

兄弟要素

現在のページの前後で表示するページ数を制御するには、siblings プロパティを設定します。

境界線

ページネーションの最初と最後に表示するページ数を制御するには、boundaries プロパティを設定します。

カスタムアイテム

renderItem プロパティを使用して、ページネーションアイテムをカスタマイズできます。

スロット

• base: メインのページネーションスロット。
• wrapper: ページネーションのラッパースロット。これはページネーションアイテムをラップします。
• prev: 前のボタンのスロット。
• next: 次のボタンのスロット。
• item: 中間のアイテムに適用されるページネーションアイテムのスロット。
• cursor: 現在のページのスロット。disableCursorAnimation が false で、disableAnimation が `false の場合にのみ使用可能です。
• forwardIcon: 省略記号ボタンをホバリングしたときに表示される前方アイコンのスロット。
• ellipsis: 省略記号のスロット。
• chevronNext: シェブロン（山形）の次のアイコンのスロット。

カスタムスタイル

Pagination コンポーネントは、コンポーネントのスロットにカスタムの Tailwind CSS クラスを渡すことでカスタマイズできます。

カスタム実装

さらにページネーションをカスタマイズする必要がある場合は、usePagination フックを使用して独自の実装を作成できます。

データ属性

Pagination の base 要素には、以下の属性があります。

• data-controls：ページネーションにコントロールがあるかどうかを示します。showControls プロパティに基づきます。
• data-loop：ページネーションがループするかどうか。loop プロパティに基づきます。
• data-dots-jump：ページネーションにドットジャンプがあるかどうかを示します。dotsJump プロパティに基づきます。
• data-total：ページの総数。total プロパティに基づきます。
• data-active-page：アクティブなページ。activePage プロパティに基づきます。

アクセシビリティ

• ルートノードには、デフォルトで navigation のロールがあります。
• ページネーション項目には、項目の目的 ("次のページボタン"、"前のページボタン" など) を識別する aria-label があります。このラベルは、getItemAriaLabel 関数を使用することで上書きできます。
• ページネーション項目は、tabindex が "0" のタブ順に並んでいます。

API

Pagination Props

Pagination Events

型

ページネーションアイテムのプロパティ

export type PaginationItemRenderProps = {
  // The pagination item ref.
  ref?: Ref<T>;
  // The pagination item value.
  value: PaginationItemValue;
  // The pagination item index.
  index: number;
  // The active page number.
  activePage: number;
  // Whether the pagination item is active.
  isActive: boolean;
  // Whether the pagination item is the first item in the pagination.
  isFirst: boolean;
  // Whether the pagination item is the last item in the pagination.
  isLast: boolean;
  // Whether the pagination item is the next item in the pagination.
  isNext: boolean;
  // Whether the pagination item is the previous item in the pagination.
  isPrevious: boolean;
  // The pagination item className.
  className: string;
  // Callback to go to the next page.
  onNext: () => void;
  // Callback to go to the previous page.
  onPrevious: () => void;
  // Callback to go to the page.
  setPage: (page: number) => void;
};

type renderItem?: (props: PaginationItemRenderProps) => ReactNode;