Pagination
主に「よくあるテーブル」などコレクションにおけるページを切り替えるためのコンポーネントです。使用する場所によって機能を落とせます。
モバイル
モバイルではPaginationを使わないでください。「さらに表示」ボタンの設置を推奨します。利用者はPaginationの小さいボタンを操作することなく、使い慣れた垂直方向のスクロールで必要な情報にたどり着けます。
また、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 タグが使用されます。