🔖

(調査中)Pagination について

2022/12/26に公開約1,400字

公式リファレンス: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

ログインするとコメントできます