Zenn
🔖

（調査中）Pagination について

2022/12/26に公開
React
tech

公式リファレンス：https://mui.com/material-ui/api/pagination/

Props

  • boundaryCount ★
    type:integer （数値）
    内容：最初と最後に常に表示されるページ数
例
<Pagination count={10} boundaryCount={1} />

→ page5を選択しているとき
< 1 ‥ 4 5 6 ‥ 10 >　のような表示になる

  • classes
    type:object
    内容：コンポーネントに適用されるスタイルを拡張する

  • color
    色

  • count　★
    type:integer
    内容：総ページ数

  • defaultPage　★
    type:integer
    内容：デフォルトで選択されるページ（コンポーネントが非制御の場合）

  • disabled
    type:bool
    内容：trueの場合、コンポーネントは無効となる
    →button disable と同じように、（デフォルトだと）灰色になってボタンを押せなくなる

  • getItemAriaLabel
    type:func
    内容：難しくてよくわからない

  • hideNextButton
    type:bool
    内容：trueの場合、次のページのボタンを非表示にする
    ※何も設定しないと次のページのボタンも表示される

  • hidePrevButton
    type:bool
    内容：trueの場合、前のページのボタンを非表示にする
    ※何も設定しないと前のページのボタンも表示される

  • onChange ★
    ページが更新された時に実行されるコールバック

* Signature:
function(event: React.ChangeEvent<unknown>, page: number) => void
event: The event source of the callback.
page: The page selected.

  // ** TablePagination
  const handleChangePage = (event: unknown, newPage: number) => {
    setPage(newPage)
  }

  • page
    type:integer
    内容：現在のページ
    ？

  • renderItem
    type:func
    内容：項目をレンダリングする
    ？

  • shape
    type: circular | rounded
    内容：ページングアイテムの形状を指定する

  • showFirstButton　★
    type:bool
    内容：trueの場合、1ページ目に飛ぶボタンを表示する
    |<　こういうボタン

  • showLastButton　★
    type:bool
    内容：trueの場合、最後のページに飛ぶボタンを表示する
    ">|　こういうボタン

  • size
    type: いっぱい
    内容：コンポーネントのサイズ

  • sx
    いつものやつ
    （これはまた別で調査が必要）

  • variant
    type : 色々
    内容：使用するバリアント　バリアントが良く分からない
    バリアントの参考：https://www.nhs.co.jp/sap/library/variant.html

Discussion