Pagination 分页 使用分页组件，用户可以从一系列页面中选择某个特定的页面。
< Pagination count = { 10 } /> < Pagination count = { 10 } color = " primary" /> < Pagination count = { 10 } color = " secondary" /> < Pagination count = { 10 } disabled /> Press Enter to start editing
Copy (Or Ctrl + C)
< Pagination count = { 10 } variant = " outlined" /> < Pagination count = { 10 } variant = " outlined" color = " primary" /> < Pagination count = { 10 } variant = " outlined" color = " secondary" /> < Pagination count = { 10 } variant = " outlined" disabled /> Press Enter to start editing
Copy (Or Ctrl + C)
< Pagination count = { 10 } shape = " rounded" /> < Pagination count = { 10 } variant = " outlined" shape = " rounded" /> Press Enter to start editing
Copy (Or Ctrl + C)
< Pagination count = { 10 } size = " small" /> < Pagination count = { 10 } /> < Pagination count = { 10 } size = " large" /> Press Enter to start editing
Copy (Or Ctrl + C) 你可以有选择地启用首尾页的按钮，或这禁用上一页和下一页的按钮。
< Pagination count = { 10 } showFirstButton showLastButton /> < Pagination count = { 10 } hidePrevButton hideNextButton /> Press Enter to start editing
Copy (Or Ctrl + C) 分页范围 你可以使用 siblingRange 属性来指定当前页面两侧显示的数字多少，并使用boundaryRange属性来调整在起始和结束页码旁边显示的位数。
< Pagination count = { 10 } renderItem = { ( item) => (
< PaginationItem components = { { previous: ArrowBackIcon, next: ArrowForwardIcon } } { ... item} /> ) } /> Press Enter to start editing
Copy (Or Ctrl + C) 你可以使用 siblingRange 属性来指定当前页面两侧显示的数字多少，并使用boundaryRange属性来调整在起始和结束页码旁边显示的位数。
< Pagination count = { 11 } defaultPage = { 6 } siblingCount = { 0 } /> < Pagination count = { 11 } defaultPage = { 6 } /> { }
< Pagination count = { 11 } defaultPage = { 6 } siblingCount = { 0 } boundaryCount = { 2 } /> < Pagination count = { 11 } defaultPage = { 6 } boundaryCount = { 2 } /> Press Enter to start editing
Copy (Or Ctrl + C)
< Typography > : { page} </ Typography > < Pagination count = { 10 } page = { page} onChange = { handleChange} /> Press Enter to start editing
Copy (Or Ctrl + C)
< MemoryRouter initialEntries = { [ '/inbox' ] } initialIndex = { 0 } > < Routes > < Route path = " *" element = { < Content /> } /> </ Routes > </ MemoryRouter > Press Enter to start editing
Copy (Or Ctrl + C) For advanced customization use cases, a headless usePagination() hook is exposed. 它支持的选项与分页组件大致相同，但不包括与 JSX 渲染有关的所有属性。 它支持的选项与分页组件大致相同，但不包括与 JSX 渲染有关的所有属性。 The Pagination component is built on this hook.
import usePagination from '@mui/material/usePagination' ;
Copy (Or $keyC) Pagination 组件的设计是为了在不使用无限加载的情况下，将任意数量的项目进行分页。 比如说博客这样重视 SEO 的环境下，它是首选。
对于大型表格数据的分页，应该使用 TablePagination 组件。
< TablePagination component = " div" count = { 100 } page = { page} onPageChange = { handleChangePage} rowsPerPage = { rowsPerPage} onRowsPerPageChange = { handleChangeRowsPerPage} /> Press Enter to start editing
Copy (Or Ctrl + C) ⚠️ Note that the Pagination page prop starts at 1 to match the requirement of including the value in the URL, while the TablePagination page prop starts at 0 to match the requirement of zero-based JavaScript arrays that comes with rendering a lot of tabular data.
You can learn more about this use case in the table section of the documentation.
Accessibility ARIA The root node has a role of "navigation" and aria-label "pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "go to previous page", "go to page 1" etc.). You can override these using the getItemAriaLabel prop.
键盘输入 The pagination items are in tab order, with a tabindex of "0".