问题
需要在移动 View 中显示较少的页面,以便它可以与同一行中的标题(我的订单)对齐。
图书馆
进展
能够删除移动 View 中的Next 和Previous 内容,但既不能找到任何现成的 prop(s) 也不能找到任何 CSS 来减少移动 View 中的页面数
WebView
移动 View
代码
CSS
@media (min-width: 501px) {
.MuiPagination-root {
.MuiPagination-ul {
flex-wrap: nowrap;
li {
&:first-child {
flex-basis: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
> button::before {
margin-right: 10px;
content: "Previous ";
}
}
&:last-child {
flex-basis: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
> button::after {
margin-left: 10px;
margin-right: 20px;
content: " Next";
}
}
}
}
}
自定义组件
import React, { useState } from "react";
import PropTypes from "prop-types";
import Pagination from '@material-ui/lab/Pagination';
export const CustomPagination = ({ onChange, totalRecords, currentPage, className, shape }) => {
return (
<Pagination
count={totalRecords}
shape={shape}
className={className}
onChange={onChange}
page={currentPage}
/>
)
};
CustomPagination.propTypes = {
paginationLength: PropTypes.number,
selectPage: PropTypes.func,
activePage: PropTypes.number,
};
最佳答案
我想出的解决方案之一是将组件分页包装在一个 Box 中,然后根据 View 更改其大小:
export function Test() {
return;
<>
<Box sx={{ display: { xs: "none", md: "block" } }}>
<Pagination
/>
</Box>
<Box sx={{ display: { xs: "block", md: "none" } }}>
<Pagination
size="small"
/>
</Box>
</>;
}
</Box>
关于css - 如何在分页中的移动 View 中显示更少的页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66459115/