reactjs - 如何使用更多下拉菜单实现material-ui选项卡(如文档屏幕截图所示)

Question

我希望实现一个 Tabs 组件，其中包含用于桌面 View 的大量 (7-9) Tab 组件。当可滚动选项卡超过 Tabs 上的视口(viewport)宽度时，我不想使用它，而是希望额外的 Tab 项目位于 更多 下拉菜单就像下面的示例文档所示:

问题:

1. 实现这一目标的预期实现是什么？实际上，我想要他们描述的完全相同的功能，当我从上面的下拉列表中单击一个项目(例如书籍)时，它将与 Tab 直接交换位置 < strong>更多下拉菜单，如文档中的屏幕截图所示:

具体来说，更多下拉菜单是 Tab组件，或 Dropdown Menu成分？

使用时，默认情况下如何从“更多下拉列表”中选择选项卡/选项？ (例如:所选选项卡是否会移动到可见选项卡部分，就像屏幕截图一样？)。或者是否需要手动完成才能达到该结果？

最后，是否有此用法示例的链接？

Answer 1

迟到了，但可能对某人有帮助。

我能够使用弹出框组件在选项卡内实现下拉菜单。

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

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

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