Pagination

Paginationは、コンテンツのページ分割とナビゲーションを管理するためのコンポーネントです。

インポート

import { Pagination } from "@yamada-ui/react"

Copied!

使い方

編集可能な例

<Pagination total={10} />

Copied!

バリアントを変更する

編集可能な例

<VStack>
  <For each={["solid", "outline", "ghost", "unstyled"]}>
    {(variant, index) => (
      <Pagination key={index} total={10} variant={variant} />
    )}
  </For>
</VStack>

Copied!

サイズを変更する

編集可能な例

<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => <Pagination key={index} total={10} size={size} />}
  </For>
</VStack>

Copied!

カラースキーマを変更する

編集可能な例

<VStack>
  <For
    each={[
      { variant: "solid", colorScheme: "secondary" },
      { variant: "outline", colorScheme: "orange" },
      { variant: "ghost", colorScheme: "cyan" },
    ]}
  >
    {({ variant, colorScheme }, index) => (
      <Pagination
        key={index}
        total={10}
        variant={variant}
        colorScheme={colorScheme}
      />
    )}
  </For>
</VStack>

Copied!

エッジコントロールボタンを追加する

最初と最後のページに移動するボタンを追加するには、withEdgesをtrueにします。

編集可能な例

<Pagination total={10} withEdges />

Copied!

前後の数をカスタマイズする

現在のページの前後に表示する数を変更したい場合は、siblingsに表示したい数を設定します。

編集可能な例

<Pagination total={77} siblings={3} />

Copied!

最初と最後の数をカスタマイズする

最初と最後に表示する数を変更したい場合は、boundariesに表示したい数を設定します。

編集可能な例

<Pagination total={77} boundaries={3} />

Copied!

ページネーションを無効にする

ページネーションを無効にしたい場合は、isDisabledを設定します。

編集可能な例

<VStack>
  <For each={["solid", "outline", "ghost", "unstyled"]}>
    {(variant, index) => (
      <Pagination key={index} total={10} variant={variant} isDisabled />
    )}
  </For>
</VStack>

Copied!

コントロールボタンをカスタマイズする

controlProps: 両方のボタンに設定されるpropsです。
controlPrevProps: 前のボタンに設定されるpropsです。
controlNextProps: 次のボタンに設定されるpropsです。

編集可能な例

<VStack>
  <For
    each={[
      { props: { controlProps: { children: <GhostIcon /> } } },
      { props: { controlPrevProps: { children: <GhostIcon /> } } },
      { props: { controlNextProps: { children: <GhostIcon /> } } },
    ]}
  >
    {({ props }, index) => <Pagination key={index} total={10} {...props} />}
  </For>
</VStack>

Copied!

エッジコントロールボタンをカスタマイズする

edgeProps: 両方のボタンに設定されるpropsです。
edgeFirstProps: 最初のボタンに設定されるpropsです。
edgeLastProps: 最後のボタンに設定されるpropsです。

編集可能な例

<VStack>
  <For
    each={[
      { props: { edgeProps: { children: <GhostIcon /> } } },
      { props: { edgeFirstProps: { children: <GhostIcon /> } } },
      { props: { edgeLastProps: { children: <GhostIcon /> } } },
    ]}
  >
    {({ props }, index) => (
      <Pagination key={index} total={10} withEdges {...props} />
    )}
  </For>
</VStack>

Copied!

制御する

編集可能な例

const [page, onChange] = useState<number>(1)

return <Pagination page={page} total={10} onChange={onChange} />

Copied!

GitHubでこのページを編集する

前Breadcrumb 次Stepper