SmartHR Design System

Pagination

「よくあるテーブル」などの一覧のページを切り替えるためのコンポーネントです。大量データを分割表示し、ページ単位で前後移動させるときに使います。使用する場所によって機能を落とせます。

モバイル

Paginationの代わりに、データを追加で読み込むボタンの利用を検討する

以下の理由から、モバイルでのPaginationの表示には注意が必要です。Paginationの代わりに、データを追加で読み込んで表示するボタン（例：よくあるリストの「さらに表示」ボタン）を使うことを検討してください。

  • 水平方向に複数の操作が並ぶPaginationは誤操作を招きやすい
  • ユーザーはモバイル環境では垂直方向のスクロールで情報を閲覧する操作に慣れている

「さらに表示」ボタンがリストの最下部に表示されている。

よくあるリストの「さらに表示」ボタン

ただし、次のような場合にはモバイルでもPaginationが適していることがあります。

  • 表示されるデータの件数が多いと想定される場合
  • 一覧上から特定のデータを探して操作することが主要な使われ方として想定される場合

モバイルでPaginationを表示する場合は、画面の幅が狭いため、withoutNumberpropsを有効にするか、paddingpropsに0~1の値を設定してください。

スクリーンショット：paddingを1に設定したPagination

paddingを1に設定した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" ComponentClass<any, any> FunctionComponent<any> "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" "map" "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" "filter" "foreignObject" "g" "image" "line" "linearGradient" "marker" "mask" "metadata" "mpath" "path" "pattern" "polygon" "polyline" "radialGradient" "rect" "set" "stop" "switch" "text" "textPath" "tspan" "use" "view"

next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで a タグが使用されます。