极客教程React MUI Pagination API
MUI or Material-UI 是一个提供了预定义的强大且可定制的组件的UI库，用于更轻松地进行React网页开发。MUI的设计基于谷歌的Material Design。
在本文中，我们将讨论 React MUI Pagination API 。分页组件允许用户从列表中选择许多页面中的一页。用户可以从一系列页面中选择一个页面。该API提供了许多功能，我们将学习如何实现它们。
导入Pagination API
import Pagination from '@mui/material/Pagination';
// or
import { Pagination } from '@mui/material';
属性列表： 以下是与此组件一起使用的不同属性的列表。我们可以根据需要访问并修改它们。
- boundaryCount（number）： 用于设置在开头和结尾可见的页面数量。默认值为1。
- classes（object）： 用于覆盖默认样式并添加自定义功能。
- color（primary / secondary / standard）： 用于设置组件的活动颜色。默认值为 standard。
- count（integer）： 用于设置分页中的页面数量。默认值为1。
- disabled（bool）： 如果设置为 true，则禁用组件。默认值为 false。
- getItemAriaLabel（func）： 接受一个返回字符串值的函数，为当前页提供名称。
- hideNextButton（bool）： 如果设置为 true，则隐藏分页中的下一个按钮。默认值为 false。
- hidePrevButton（bool）： 如果设置为 true，则隐藏分页中的上一个按钮。默认值为 false。
- page（integer）： 用于设置当前页。
- renderItem（func）： 渲染一个项目。
- shape（circular / rounded）： 用于设置项目的形状。默认值为 circular。
- showFirstButton（bool）： 如果设置为 true，则显示分页中的第一个按钮。默认值为 false。
- showLastButton（bool）： 如果设置为 true，则显示分页中的最后一个按钮。默认值为 false。
- siblingCount（integer）： 用于设置当前页前后始终可见的页面数量。默认值为1。
- size（small / medium / large）： 用于设置分页项的大小。默认值为 medium。
- sx（Array
/ func / object）： 系统属性允许定义系统覆盖以及额外的CSS样式。 - variant（outlined / text）： 用于设置变体。默认值为 text。
CSS 规则：
- root(.MuiPagination-root): 用于设置应用于根元素的样式。
- ul(.MuiPagination-ul): 用于设置应用于ul元素的样式。
- outlined(.MuiPagination-outlined): 用于设置应用于根元素的样式，如果变体为outlined。
- text(.MuiPagination-text): 用于设置应用于根元素的样式，如果变体为text。
语法: 以下是创建分页项的方式:
<Pagination count={10} />
安装和创建React应用程序，并添加MUI依赖项：
步骤1： 使用以下命令创建React项目。
npx create-react-app gfg_tutorial
步骤2: 进入项目目录
cd gfg_tutorial
步骤3： 遵循以下步骤安装MUI的依赖项：
npm install @mui/material @emotion/react
npm install @emotion/styled @mui/lab @mui/icons-material
项目结构： 项目应该像下面这样：
步骤4： 按照以下步骤运行项目：
npm start
示例1： 在接下来的示例中，我们将使用分页组件。
App.js
import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import { Pagination, Typography } from "@mui/material";
function App() {
const [page, setPage] = React.useState(1);
const handleChange = (event, value) => {
setPage(value);
};
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI Pagination API</strong>
</div>
<br />
<Box
sx={{
margin: "auto",
width: "fit-content",
alignItems: "center",
}}
>
<Typography fontSize={32} align="center">
Page: {page}
</Typography>
<Pagination count={10} page={page}
onChange={handleChange} />
</Box>
</div>
);
}
export default App;
输出:
示例2： 在以下示例中，我们拥有不同形状和颜色的分页项。
App.js
import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import { Pagination, Typography } from "@mui/material";
function App() {
const [page1, setPage1] = React.useState(1);
const handleChange1 = (event, value) => {
setPage1(value);
};
const [page2, setPage2] = React.useState(1);
const handleChange2 = (event, value) => {
setPage2(value);
};
const [page3, setPage3] = React.useState(1);
const handleChange3 = (event, value) => {
setPage3(value);
};
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI Pagination API</strong>
</div>
<br />
<Box
sx={{
margin: "auto",
width: "fit-content",
alignItems: "center",
}}
>
<Typography fontSize={32} align="center">
Page: {page1}
</Typography>
<Pagination count={10} page={page1}
onChange={handleChange1} />
<Typography fontSize={32} align="center">
Page: {page2}
</Typography>
<Pagination
count={10}
page={page2}
onChange={handleChange2}
variant="outlined"
color="primary"
/>
<Typography fontSize={32} align="center">
Page: {page3}
</Typography>
<Pagination
count={10}
page={page3}
onChange={handleChange3}
variant="outlined"
shape="rounded"
color="secondary"
/>
</Box>
</div>
);
}
export default App;
输出：
参考： https://mui.com/material-ui/api/pagination/