Pagination
主に「よくあるテーブル」などコレクションにおけるページを切り替えるためのコンポーネントです。使用する場所によって機能を落とせます。
モバイル
Paginationの代わりに、データを追加で読み込むボタンの利用を検討する
以下の理由から、モバイルでのPaginationの表示には注意が必要です。Paginationの代わりに、データを追加で読み込んで表示するボタン（例：よくあるリストの「さらに表示」ボタン）を使うことを検討してください。
- 水平方向に複数の操作が並ぶPaginationは誤操作を招きやすい
- ユーザーはモバイル環境では垂直方向のスクロールで情報を閲覧する操作に慣れている
ただし、次のような場合にはモバイルでもPaginationが適していることがあります。
- 表示されるデータの件数が多いと想定される場合
- 一覧上から特定のデータを探して操作することが主要な使われ方として想定される場合
モバイルでPaginationを表示する場合は、画面の幅が狭いため、withoutNumberpropsを有効にするか、paddingpropsに0~1の値を設定してください。
Props
total必須
number
全ページ数
current必須
number
現在のページ
padding
number
現在のページの前後に表示するページ番号のボタンの数
withoutNumbers
false true
true のとき、ページ番号のボタンを表示しない
onClick
(pageNumber: number, e: MouseEvent<HTMLElement, MouseEvent>) => void (href: string, e: MouseEvent<HTMLElement, MouseEvent>) => void
ボタンを押下したときに発火するコールバック関数 リンクを押下したときに発火するコールバック関数
hrefTemplate
(pageNumber: number) => string
href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります
linkAs
"symbol" "object" "map" "filter" "input" "a" "abbr" "address" "area" "article" "aside" "audio" "b" "base" "bdi" "bdo" "big" "blockquote" "body" "br" "button" "canvas" "caption" "center" "cite" "code" "col" "colgroup" "data" "datalist" "dd" "del" "details" "dfn" "dialog" "div" "dl" "dt" "em" "embed" "fieldset" "figcaption" "figure" "footer" "form" "h1" "h2" "h3" "h4" "h5" "h6" "head" "header" "hgroup" "hr" "html" "i" "iframe" "img" "ins" "kbd" "keygen" "label" "legend" "li" "link" "main" "mark" "menu" "menuitem" "meta" "meter" "nav" "noindex" "noscript" "ol" "optgroup" "option" "output" "p" "param" "picture" "pre" "progress" "q" "rp" "rt" "ruby" "s" "samp" "search" "slot" "script" "section" "select" "small" "source" "span" "strong" "style" "sub" "summary" "sup" "table" "template" "tbody" "td" "textarea" "tfoot" "th" "thead" "time" "title" "tr" "track" "u" "ul" "var" "video" "wbr" "webview" "svg" "animate" "animateMotion" "animateTransform" "circle" "clipPath" "defs" "desc" "ellipse" "feBlend" "feColorMatrix" "feComponentTransfer" "feComposite" "feConvolveMatrix" "feDiffuseLighting" "feDisplacementMap" "feDistantLight" "feDropShadow" "feFlood" "feFuncA" "feFuncB" "feFuncG" "feFuncR" "feGaussianBlur" "feImage" "feMerge" "feMergeNode" "feMorphology" "feOffset" "fePointLight" "feSpecularLighting" "feSpotLight" "feTile" "feTurbulence" "foreignObject" "g" "image" "line" "linearGradient" "marker" "mask" "metadata" "mpath" "path" "pattern" "polygon" "polyline" "radialGradient" "rect" "set" "stop" "switch" "text" "textPath" "tspan" "use" "view" ComponentClass<any, any> FunctionComponent<any>
next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで a タグが使用されます。