react.js - antd tabs过多时...选中排序少了视窗内的内容，怎么修改固定顺序？

Question

以下是官方的案例，直接点击选择后再打开的都会出现变化，这个应该怎么改

https://ant.design/components/tabs-cn#tabs

Answer 1

在 Ant Design 的 Tabs 组件中，当 tabs 过多时，可以使用滚动条来查看不在视窗内的 tabs。如果你想要修改 tabs 的固定顺序，可以通过设置 tabBarGutter 属性来实现。

tabBarGutter 属性表示每个 tab 之间的间距。默认情况下，它的值为 0，表示每个 tab 之间没有间距。如果你想要固定 tabs 的顺序，可以将 tabBarGutter 的值设置为一个较大的正数，例如：

<Tabs tabBarGutter={100}>
  <TabPane tab="Tab 1" key="1">
    Content of tab 1
  </TabPane>
  <TabPane tab="Tab 2" key="2">
    Content of tab 2
  </TabPane>
  <TabPane tab="Tab 3" key="3">
    Content of tab 3
  </TabPane>
  ...
</Tabs>

在上面的示例中，tabBarGutter 的值为 100，表示每个 tab 之间的间距为 100 个像素。这样，即使 tabs 的数量很多，也不会出现选中排序少了视窗内的内容的问题。

需要注意的是，tabBarGutter 属性只适用于 Tabs 组件，对于 TabPane 组件没有影响。如果你想要修改 TabPane 的样式，可以通过自定义样式表来实现。例如，可以给 TabPane 添加一个 padding 或 margin 样式，来增加它的宽度和高度。