语义UI React：如何使Tab菜单使用容器的整个宽度？

Question

我有一个仅使用两（2）个菜单选项的使用语义UI Tab的组件。我的问题是，如何包装2个选项以利用其容器的整个宽度。

请参见下图以供参考：

我希望“日历”和“任务列表”使用宽度的50％。

我在他们的示例中使用以下代码：

      const panes = [{
                menuItem: 'Calendar',
                render: () => <Tab.Pane attached={false}><EventList /></Tab.Pane>
              },
              {
                menuItem: 'To-Do List',
                render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>
              }
            ]
      return <Tab
          menu={{ attached: false }}
          panes={panes}
        />

Answer 1

我认为标签的宽度取决于每个标签的内容，所以我改用'Step'。将此作为Tab菜单使用，因为更容易使其相等。 https://react.semantic-ui.com/elements/step/

enter image description here