Pagination
Paginationは、コンテンツのページ分割とナビゲーションを管理するためのコンポーネントです。
インポート
import { Pagination } from "@yamada-ui/react"
使い方
編集可能な例
<Pagination total={10} />
バリアントを変更する
編集可能な例
<VStack> <Pagination total={10} variant="solid" /> <Pagination total={10} variant="outline" /> <Pagination total={10} variant="ghost" /> <Pagination total={10} variant="unstyled" /> </VStack>
サイズを変更する
編集可能な例
<VStack> <Pagination total={10} size="xs" /> <Pagination total={10} size="sm" /> <Pagination total={10} size="md" /> <Pagination total={10} size="lg" /> <Pagination total={10} size="xl" /> </VStack>
カラースキーマを変更する
編集可能な例
<VStack> <Pagination total={10} variant="solid" colorScheme="secondary" /> <Pagination total={10} variant="outline" colorScheme="orange" /> <Pagination total={10} variant="ghost" colorScheme="cyan" /> </VStack>
エッジコントロールボタンを追加する
最初と最後のページに移動するボタンを追加するには、withEdgesをtrueにします。
編集可能な例
<Pagination total={10} withEdges />
前後の数をカスタマイズする
現在のページの前後に表示する数を変更したい場合は、siblingsに表示したい数を設定します。
編集可能な例
<Pagination total={77} siblings={3} />
最初と最後の数をカスタマイズする
最初と最後に表示する数を変更したい場合は、boundariesに表示したい数を設定します。
編集可能な例
<Pagination total={77} boundaries={3} />
ページネーションを無効にする
ページネーションを無効にしたい場合は、isDisabledを設定します。
編集可能な例
<VStack> <Pagination total={10} variant="solid" isDisabled /> <Pagination total={10} variant="outline" isDisabled /> <Pagination total={10} variant="ghost" isDisabled /> <Pagination total={10} variant="unstyled" isDisabled /> </VStack>
コントロールボタンをカスタマイズする
controlProps: 両方のボタンに設定されるpropsです。controlPrevProps: 前のボタンに設定されるpropsです。controlNextProps: 次のボタンに設定されるpropsです。
編集可能な例
<VStack> <Pagination total={10} controlProps={{ children: <Ghost /> }} /> <Pagination total={10} controlPrevProps={{ children: <Ghost /> }} /> <Pagination total={10} controlNextProps={{ children: <Ghost /> }} /> </VStack>
エッジコントロールボタンをカスタマイズする
edgeProps: 両方のボタンに設定されるpropsです。edgeFirstProps: 最初のボタンに設定されるpropsです。edgeLastProps: 最後のボタンに設定されるpropsです。
編集可能な例
<VStack> <Pagination total={10} withEdges edgeProps={{ children: <Ghost /> }} /> <Pagination total={10} withEdges edgeFirstProps={{ children: <Ghost /> }} /> <Pagination total={10} withEdges edgeLastProps={{ children: <Ghost /> }} /> </VStack>
制御する
編集可能な例
const [page, onChange] = useState<number>(1) return <Pagination page={page} total={10} onChange={onChange} />
GitHubでこのページを編集する