时间戳

首页 > 解决方案 > Material UI 分页组件初始视图的数字覆盖默认

reactjs - Material UI 分页组件初始视图的数字覆盖默认

问题描述

在 Material UI 中，分页组件如下所示。

  <Pagination count={10} />

材质UI分页

这里分页从 1 开始，第一个视图在 5 结束，我需要显示 1 到 4，如下所示

我尝试使用兄弟计数和边界计数，但这不起作用。有没有办法或者我在上面的道具中遗漏了什么。

限制到 4

标签： reactjsmaterial-ui

解决方案

目前没有办法做到这一点。

这由以下代码块控制（来自https://github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui-lab/src/Pagination/usePagination.js#L57 ):

  const siblingsEnd = Math.min(
    Math.max(
      // Natural end
      page + siblingCount,
      // Upper boundary when page is low
      boundaryCount + siblingCount * 2 + 2,
    ),
    // Less than endPages
    endPages[0] - 2,
  );

当page、boundaryCount和siblingCount都是 1 时，siblingsEnd将是 5（因为boundaryCount + siblingCount * 2 + 2）。如果您使用siblingCount0 的 a，您将得到siblingsEnd3 的 a，但这会导致它的行为方式在您开始进入后面的页面时看起来不太好。目前没有办法让第一个数字块在 1 时以 4 结尾page。

推荐阅读