极客教程React MUI 分页项 API
MUI 或 Material-UI 是一个提供了预定义的强大且可定制的组件用于 React 的 UI 库，以便更轻松地进行 Web 开发。MUI 设计基于 Google 的 Material Design。
在本文中，我们将讨论 React MUI 分页项 API 。图标元素用于创建不同形状和尺寸、不同颜色的图标。分页项是展示的单个页码。API 提供了很多功能，我们将学习如何实现它们。
导入分页项 API
import PaginationItem from '@mui/material/PaginationItem';
// or
import { PaginationItem } from '@mui/material';
Props列表： 以下是与此组件一起使用的不同props的列表。我们可以根据需求访问并修改它们。
- classes (object)： 其用于覆盖默认样式并添加自定义功能。
- color (primary/secondary/standard)： 其用于设置组件的活动颜色。默认值为standard。
- component (elementType)： 用于根节点。
- components (elementType)： 用于设置首个、最后一个、上一个和下一个按钮。
- disabled (bool)： 如果设置为true，则组件将被禁用。默认值为false。
- page (integer)： 用于设置当前页面。
- selected (bool)： 如果设置为true，则分页项将被选中。默认值为false。
- shape (circular/rounded)： 用于设置项的形状。默认值为circular。
- size (small/medium/large)： 用于设置分页项的大小。默认值为medium。
- **sx (Array
/ func / object)： ** 系统prop允许定义系统覆盖以及额外的CSS样式。 - type (end-ellipsis/first/last/next/page/previous/start-ellipsis)： 用于设置分页项。默认值为page。
- variant (outlined/text)： 用于设置变体。默认值为text。
CSS规则：
- root (.MuiPaginationItem-root): 它是应用于根元素的样式。
- page (.MuiPaginationItem-page): 如果类型设置为page，则应用于根元素的样式。
- sizeSmall (.MuiPaginationItem-sizeSmall): 如果大小设置为小，则应用于根元素的样式。
- sizeLarge (.MuiPaginationItem-sizeLarge): 如果大小设置为大，则应用于根元素的样式。
- text (.MuiPaginationItem-text): 如果变体设置为文本，则应用于根元素的样式。
- textPrimary (.MuiPaginationItem-textPrimary): 如果变体设置为文本且颜色设置为primary，则应用于根元素的样式。
- textSecondary (.MuiPaginationItem-textSecondary): 如果变体设置为文本且颜色设置为secondary，则应用于根元素的样式。
- outlined (.MuiPaginationItem-outlined): 如果变体设置为outlined，则应用于根元素的样式。
- outlinedPrimary (.MuiPaginationItem-outlinedPrimary): 如果变体设置为outlined且颜色设置为primary，则应用于根元素的样式。
- outlinedSecondary (.MuiPaginationItem-outlinedSecondary): 如果变体设置为outlined且颜色设置为secondary，则应用于根元素的样式。
- rounded (.MuiPaginationItem-rounded): 如果rounded设置为true，则应用于根元素的样式。
- ellipsis (.MuiPaginationItem-ellipsis): 如果类型设置为start-ellipsis或end-ellipsis，则应用于根元素的样式。
- firstLast (.MuiPaginationItem-firstLast): 如果类型设置为first或last，则应用于根元素的样式。
- previousNext (.MuiPaginationItem-previousNext): 如果类型设置为previous或next，则应用于根元素的样式。
- focusVisible (.Mui-focusVisible): 如果键盘聚焦，则应用于根元素的状态类。
- disabled (.Mui-disabled): 如果disabled设置为true，则应用于根元素的状态类。
- selected (.Mui-selected): 如果selected设置为true，则应用于根元素的状态类。
- icon (.MuiPaginationItem-icon): 用于显示图标的样式。
语法：
<Pagination
page={page}
onChange={handleChange}
count={10}
renderItem={(item) => (
<PaginationItem
components={{
previous: ArrowBackIcon,
next: ArrowForwardIcon
}}
{...item}
/>
)}
/>
安装和创建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： 在以下示例中，我们已创建自定义箭头作为PaginationItems。
App.js
import "./App.css";
import * as React from "react";
import Pagination from "@mui/material/Pagination";
import PaginationItem from "@mui/material/PaginationItem";
import Stack from "@mui/material/Stack";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import { Box, 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 PaginationItem API</strong>
</div>
<br />
<Box
sx={{
margin: "auto",
width: "fit-content",
alignItems: "center",
}}
>
<Typography fontSize={32} align="center">
Page: {page}
</Typography>
<Stack spacing={2}>
<Pagination
onChange={handleChange}
count={10}
renderItem={(item) => (
<PaginationItem
components={{
previous: ArrowBackIcon,
next: ArrowForwardIcon
}}
{...item}
/>
)}
/>
</Stack>
</Box>
</div>
);
}
export default App;
输出：
示例2： 在下面的示例中，我们创建了不同尺寸的PaginationItem。
App.js
import "./App.css";
import * as React from "react";
import Pagination from "@mui/material/Pagination";
import PaginationItem from "@mui/material/PaginationItem";
import Stack from "@mui/material/Stack";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import { Box, 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 PaginationItem API</strong>
</div>
<br />
<Box
sx={{
margin: "auto",
width: "fit-content",
alignItems: "center",
}}
>
<Typography fontSize={32} align="center">
Page: {page}
</Typography>
<Stack spacing={2}>
<Pagination
onChange={handleChange}
count={10}
size="large"
renderItem={(item) => (
<PaginationItem
components={{
previous: ArrowBackIcon,
next: ArrowForwardIcon
}}
{...item}
/>
)}
/>
<Pagination
onChange={handleChange}
count={10}
size="medium"
renderItem={(item) => (
<PaginationItem
components={{
previous: ArrowBackIcon,
next: ArrowForwardIcon
}}
{...item}
/>
)}
/>
<Pagination
onChange={handleChange}
count={10}
size="small"
renderItem={(item) => (
<PaginationItem
components={{
previous: ArrowBackIcon,
next: ArrowForwardIcon
}}
{...item}
/>
)}
/>
</Stack>
</Box>
</div>
);
}
export default App;
输出：
参考：
https://mui.com/material-ui/api/pagination-item/#main-content