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

Question

我希望实现一个Tabs组件，其中包含用于桌面视图的大量(7-9) Tab组件。当可滚动选项卡超过Tabs上的视口宽度时，我不想使用它，而是希望额外的Tab项在More下拉菜单中，就像下面的docs示例显示的那样：

​

问题：

1. 实现这一目标的目标是什么？实际上，我希望它们描述的功能完全相同，当我单击上面下拉列表中的一个项目(例如，书籍)时，它将与Tab直接交换位置到More下拉列表的左侧，如文档中的屏幕截图所示：

​

​

1. 具体来说，是下拉列表中的制表符组件，还是下拉菜单组件？
2. 使用时，默认情况下如何从下拉列表中选择选项卡/选项？(示例:选中的选项卡会被移动到可见选项卡部分，就像屏幕截图一样吗？)还是需要手动完成才能达到这一结果？
3. 最后，有没有链接到这种用法的任何例子？

Answer 1

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

通过使用popover组件，我能够在选项卡中实现下拉。

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

它有三个标签-一，二和三。单击Tab‘3’将执行正常的选项卡更改。点击标签‘三’旁边的下拉箭头将提供额外的选项。

这不是这个问题的确切解决办法，但可以用类似的方法来实现。

Answer 2

我用MUI列表创建了逻辑，你可以用MUI选项卡定制它。我计算所有项目的宽度和检查我们是否有足够的空间，如果没有，我增加了更多的按钮和下拉，其余的在里面。请注意，如果项的宽度或长度发生更改，则现在不进行重新计算。

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

​

​