如何使用React制作垂直标签

Question

有人可以为我提供一种使用React创建垂直标签的方法吗？

我尝试了各种npm软件包，例如react-web-tabs，reactstrap和react-bootstrap。最后两个仅包含水平制表符示例.react-web-tabs在其文档中具有垂直制表符示例，但没有工作。

import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs';

class NewNavigation extends React.Component{
render(){
return(
    <Tabs defaultTab="vertical-tab-one" vertical>
        <TabList>
            <Tab tabFor="vertical-tab-one">Tab 1</Tab>
            <Tab tabFor="vertical-tab-two">Tab 2</Tab>
            <Tab tabFor="vertical-tab-three">Tab 3</Tab>
        </TabList>

        <TabPanel tabId="vertical-tab-one">
            <p>Tab 1 content</p>
        </TabPanel>

        <TabPanel tabId="vertical-tab-two">
            <p>Tab content</p>
        </TabPanel>

        <TabPanel tabId="vertical-tab-three">
            <p>Tab 3 content</p>
        </TabPanel>
    </Tabs>
    );
}
}

现在，它显示基本的水平制表符，而我想修复此代码，因为它显示垂直的制表符。如果您建议使用其他任何方法，也将不胜感激。

Answer 1

通过添加以下CSS将为您解决问题：

.rwt__tab  {
  width: 100%
}

另一种方法是通过添加以下行来在组件中导入CSS文件：

import 'react-web-tabs/dist/react-web-tabs.css';

这里是example，供您参考。