semantic-ui - 如何使语义用户界面 react 选项卡响应？

Question

我正在开发一个 react 应用程序，我最近开始使用语义 ui react 模块。

不幸的是，我无法使 Tab 对象响应...

一个非常简单的脚本来显示这一点:

import React from 'react'
import { withRouter } from 'react-router-dom'

import {Tab} from 'semantic-ui-react';

// import NavSection from './NavSection'

var sections = ["SectionA","SectionB","SectionC","SectionD","SectionE","SectionF"]

const NavigatorHeader = () => (
<div>
  <h1>Navigator</h1>
  <div>
    <Tab menu={{ pointing: true }} panes={getPanes(sections)} />
  </div>
</div>
)

export default withRouter(NavigatorHeader)


function getPanes(sections){
  return sections.map( function(section){
    return {
      menuItem: section,
      render: () =>
        <Tab.Pane attacched="false">
          <div>
            <p>
            Some Text that we can change tab from tab. E.g. with the title: <b>{section}</b>
            </p>
          </div>
        </Tab.Pane>
    }
  })
}

标签看起来很棒，内联，但如果我缩小屏幕，它们只会溢出，而我预计它们会移动到第二行。

看起来这来自我正在使用的 Selenium-ui css ( https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css )。当前版本是 2.3.1 但如果我回到使用 2.0.0 之前的版本，它是响应式的..有没有办法获得与新版本相同的行为？

谢谢，
米歇尔。
谢谢，
米歇尔。

Answer 1

根据之前的答案，我找到了一种更简单的方法来实现这一目标。

我用建议的值定义了一个 CSS:

.wrapped{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

然后将额外的类传递给菜单

<Tab menu={{ pointing: true, className: "wrapped" }} panes={getPanes(sections)} />

这解决了问题，无需任何额外的 javascript。