Semantic UI React：如何使 Tab 菜单使用容器的全宽？答案

【问题标题】：Semantic UI React: How to make Tab menu use full width of container?Semantic UI React：如何使 Tab 菜单使用容器的全宽？
【发布时间】：2020-05-12 08:04:28
【问题描述】：

我有一个使用语义 UI Tab 的组件，只有两 (2) 个菜单选项。我的问题是，如何包装 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}
        />

【问题讨论】：

标签： reactjs semantic-ui

【解决方案1】：

我认为选项卡的宽度取决于每个选项卡的内容所以我改用“步长”。将此用作选项卡菜单，因为它更容易使其相等。 https://react.semantic-ui.com/elements/step/

enter image description here

【讨论】：

【解决方案2】：

您必须在菜单宽度中指定窗格的数量。

<Tab menu={{ widths: panes.length}} />

【讨论】：