如何使用更多下拉列表实现material-ui选项卡（如文档屏幕截图所示）

Question

我希望为桌面视图实现一个包含批量（7-9）Tabs组件的Tab组件。当我超出Tabs上的视口宽度时，我不想使用可滚动标签，而是希望额外的Tab项目位于更多下拉菜单中，就像示例文档如下所示：

问题：

1. 实现这一目标的目标是什么？我实际上想要他们描述的完全相同的功能，当我点击上面的下拉菜单中的项目（例如，书籍）时，会将Tab的位置直接交换到更多的左侧下拉列表，如doc：
中的截图所示



1. 具体来说，更多下拉列表是Tab组件还是Dropdown Menu组件？
2. 使用时，默认情况下如何从“更多下拉列表”中选择标签/选项？ （例如：所选标签是否会移动到可见标签部分，就像屏幕截图一样？）。或者这是否需要手动完成以实现该结果？
3. 最后，是否有指向此用法的任何示例的链接？

Answer 1

我使用 MUI 列表创建了逻辑，您可以使用 MUI 选项卡对其进行自定义。 我计算所有项目的宽度并检查我们是否有足够的空间，如果没有，我添加了更多带有下拉菜单的按钮并将其余的添加到里面。请注意，现在如果项目的宽度或长度发生变化，它不会重新计算

https://codesandbox.io/s/muddy-paper-941ff?file=/src/App.js

Answer 2

晚了，但可能会对某人有所帮助。

我可以通过使用popover组件在选项卡中实现下拉。

https://codesandbox.io/s/436906013w

它具有三个选项卡-一，二和三。单击选项卡“三”将执行正常的选项卡更改。单击选项卡“三”旁边的下拉箭头，将提供其他选项。

这不是精确解决问题的方法，但是可以通过类似的方法来实现。