Pagination
Paginationは、コンテンツのページ分割とナビゲーションを管理するためのコンポーネントです。
<Pagination.Root total={10} />
使い方
import { Pagination } from "@yamada-ui/react"
import { Pagination } from "@/components/ui"
import { Pagination } from "@workspaces/ui"
<Pagination.Root total={10} />
バリアントを変更する
<VStack>
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant) => (
<Pagination.Root key={variant} variant={variant} total={10} />
)}
</For>
</VStack>
サイズを変更する
<VStack>
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size) => <Pagination.Root key={size} size={size} total={10} />}
</For>
</VStack>
カラースキームを変更する
<VStack>
<For each={["success", "warning"]}>
{(colorScheme) => (
<Pagination.Root key={colorScheme} colorScheme={colorScheme} total={10} />
)}
</For>
</VStack>
デフォルトのページを設定する
<Pagination.Root defaultPage={5} total={10} />
エッジコントロールボタンを追加する
最初と最後のページに移動するボタンを追加する場合は、withEdgesをtrueにします。
<Pagination.Root total={20} withEdges />
前後の数をカスタマイズする
前後の数をカスタマイズする場合は、siblingsに数値を設定します。
<Pagination.Root total={77} siblings={3} />
最初と最後の数をカスタマイズする
最初と最後の数をカスタマイズする場合は、boundariesに数値を設定します。
<Pagination.Root total={77} boundaries={3} />
無効にする
無効にする場合は、disabledをtrueに設定します。
<VStack>
<For each={["solid", "outline", "ghost", "unstyled"]}>
{(variant, index) => (
<Pagination.Root key={index} total={10} variant={variant} disabled />
)}
</For>
</VStack>
テキストを表示する
<VStack>
<Pagination.Root size="md" gap="md" total={10}>
<Pagination.PrevTrigger>
<Pagination.Item icon={<ChevronLeftIcon />} />
</Pagination.PrevTrigger>
<Pagination.Text format="compact" />
<Pagination.NextTrigger>
<Pagination.Item icon={<ChevronRightIcon />} />
</Pagination.NextTrigger>
</Pagination.Root>
<Pagination.Root size="md" gap="md" total={10}>
<Pagination.PrevTrigger>
<Pagination.Item icon={<ChevronLeftIcon />} />
</Pagination.PrevTrigger>
<Pagination.Text format="short" />
<Pagination.NextTrigger>
<Pagination.Item icon={<ChevronRightIcon />} />
</Pagination.NextTrigger>
</Pagination.Root>
</VStack>
コントロールボタンをカスタマイズする
<Pagination.Root
total={10}
withEdges
controlNextProps={{
icon: <ArrowRightIcon />,
}}
controlPrevProps={{
icon: <ArrowLeftIcon />,
}}
edgeEndProps={{
icon: <ArrowRightToLineIcon />,
}}
edgeStartProps={{
icon: <ArrowLeftToLineIcon />,
}}
/>
テキストをカスタマイズする
<Pagination.Root size="md" gap="md" total={20}>
<Pagination.PrevTrigger>
<Pagination.Item icon={<ChevronLeftIcon />} />
</Pagination.PrevTrigger>
<Pagination.Text>
{({ page, total }) => `全${total}ページ中${page}ページ目`}
</Pagination.Text>
<Pagination.NextTrigger>
<Pagination.Item icon={<ChevronRightIcon />} />
</Pagination.NextTrigger>
</Pagination.Root>
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。制御する
const [page, onChange] = useState<number>(1)
return <Pagination.Root page={page} total={10} onChange={onChange} />
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。