ページネーション

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このトピックでは、Paginationプリミティブコンポーネントの解剖学、APIリファレンス、およびバリエーションについて説明します。

解剖学

import { Pagination } from '@sitecore-search/ui';

const MyPaginationComponent = () => (
  <Pagination.Root>
        <Pagination.PrevPage>«</Pagination.PrevPage>
        <Pagination.Pages>
            <Pagination.Page18791275782<11879127578/Pagination.Page>
            ...
            <Pagination.Page>N</Pagination.Page>
        </Pagination.Pages>
        <Pagination.NextPage>»</Pagination.NextPage>
        <Pagination.FirstPage>Go to first page</Pagination.FirstPage>
        <Pagination.LastPage>Go to last page</Pagination.LastPage>
      </Pagination.Root>
);

コンポーネントの使用

次のタブでは、Paginationプリミティブコンポーネントの使用について説明します。

制御されたページネーション

Screenshot of a controlled primitive component.

({ currentPage, totalPages, onPageChange, href, defaultCurrentPage }) => {
  return (
    <PaginationRootStyled
      currentPage={currentPage}
      defaultCurrentPage={defaultCurrentPage}
      totalPages={totalPages}
      onPageChange={onPageChange}
      href={href}
    >
      <div
        style={{
          display: 'flex',
          marginBottom: 10,
        }}
      >
        <PaginationPrevPageStyled onClick={onClick}>
          <ArrowLeftIcon />
        </PaginationPrevPageStyled>

        <PaginationPagesStyled>
          {({ pages }) =>
            pages.map(({ page }) => (
              <PaginationPageStyled key={page} aria-label={`Page ${page}`} page={page} onClick={onClick}>
                {page}
              </PaginationPageStyled>
            ))
          }
        </PaginationPagesStyled>

        <PaginationNextPageStyled onClick={onClick}>
          <ArrowRightIcon />
        </PaginationNextPageStyled>
      </div>

      <div>
        <PaginationFirstPageStyled onClick={onClick}>
          {(page) => `Go to first page (${page})`}
        </PaginationFirstPageStyled>
        <PaginationLastPageStyled onClick={onClick}>{(page) => `Go to last page (${page})`}</PaginationLastPageStyled>
      </div>
    </PaginationRootStyled>
  );
}

制御されていないページネーション

Screenshot of an uncontrolled primitive component.

(props) => {
  const [currentPage, setPage] = useState(props.currentPage);
  useEffect(() => {
    setPage(props.currentPage);
  }, [props.currentPage]);
  return (
    <Template
      {...props}
      currentPage={currentPage}
      onPageChange={(page) => {
        setPage(page);
        props.onPageChange(page);
      }}
    />
  );
}

APIリファレンス

このセクションでは、解剖学的構造に表示されるコンポーネントまたはコンポーネントパーツについて説明します。すべてのコンポーネントについて、次の情報があります。

子として追加できるComponents。
Componentsは、その子として追加できます。
設定できるプロパティの詳細。

Pagination.Root (英語)

Pagination.Rootです。 component wraps all the parts for the pagination component.

子供:Pagination.Pages、Pagination.PrevPage、Pagination.NextPage、Pagination.FirstPage、およびPagination.LastPage

名前	形容
totalPages	ページ区切りコンポーネントのページ数。
currentPage	現在のページ値
defaultCurrentPage	デフォルトで選択されているページ値。
onPageChange	ページ値が変更されたときに起動するコールバック。
href	ページ番号のクリックが発生したときに処理するオプションのコールバック。
children	Rootコンポーネントの子

ページネーション。Pages

Pagination.Pagesコンポーネントは、すべてのページを折り返します。

親：Pagination.Root

子供：Pagination.Page

名前	形容
children	コンポーネントの子

Pagination.Page

Pagination.Pageコンポーネントはページ番号リンクです。

親：Pagination.Pages

名前	形容
page	リンクのページ番号。
children	コンポーネントの子

ページネーション.PrevPage

Pagination.PrevPageコンポーネントは、前のページのクリックを処理します。

親：Pagination.Root

名前	形容
onClick	クリックが発生したときに処理するオプションのコールバック。
children	コンポーネントの子

ページネーション.NextPage

Pagination.NextPageコンポーネントは、前のページのクリックを処理します。

名前	形容
onClick	クリックが発生したときに処理するオプションのコールバック。
children	コンポーネントの子

ページネーション.FirstPage

Pagination.FirstPageコンポーネントは、最初のページにリダイレクトするリンクです。

親：Pagination.Root

名前	形容
children	コンポーネントの子

ページネーション.ラストページ

Pagination.LastPageコンポーネントは、最後のページにリダイレクトするリンクです。

親：Pagination.Root

名前	形容
children	コンポーネントの子

この記事を改善するための提案がある場合は、お知らせください!