[英]Create “pages” of steps with Material UI/React Stepper (like Table Pagination)
使用带有 React 的 Material UI,我试图为流程中的每 4 个步骤创建步骤“页面”。
下面的尝试导致所有 10 个步骤仍然显示在一个视图中,而分页计算每 4 个步骤的正确页数。
return (
<Grid>
<Stepper>
{statusArr.map((label) => {
return (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
);
})}
</Stepper>
<TablePagination
component="div"
count={statusArr.length}
rowsPerPage={[4]}
page={page}
backIconButtonProps={{
'aria-label': 'previous page',
}}
nextIconButtonProps={{
'aria-label': 'next page',
}}
onChangePage={handleChangePage}
/>
</Grid>
);
理想情况下,我会在这里显示由步进器“点”表示的每一页步骤,而不是表格分页外观/功能。
请让我知道上下文是否需要额外的代码,并感谢您的想法/建议。
您只需做一些数学运算即可获得正确的页数
...
const stepsPerPage = 4;
const pageCount = Math.ceil(statusArray.length / stepsPerPage);
return (
<Grid>
<Stepper>
{Array(pageCount).fill().map(page => (
<Step>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.