Pagination
主に「よくあるテーブル」などコレクションにおけるページを切り替えるためのコンポーネントです。使用する場所によって機能を落とせます。
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 タグが使用されます。