如何使用 React 制作垂直标签 [英] How to make vertical tabs with React
问题描述
有人能给我提供一种使用 React 创建垂直标签的方法吗?
Can someone provide me with a way to create vertical tabs using React?
我尝试了各种 npm 包,如 react-web-tabs、reactstrap 和 react-bootstrap.最后两个只有水平标签的例子.React-web-tabs 在他们的文档中有一个垂直标签的例子,但它没有工作.
I experimented with various npm packages like react-web-tabs,reactstrap and react-bootstrap.The last two only had examples for horizontal tabs.React-web-tabs has a vertical tab example in their docs but it doesn't work.
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>
);
}
}
到目前为止,它显示基本的水平标签,我想修复此代码,因为它显示垂直标签.如果您推荐任何其他方式,也非常感谢.
By now, it displays basic horizontal tabs and I want to fix this code as it displays vertical tabs.It is also highly appreciated if you recommend any other way.
推荐答案
通过添加以下 CSS 将为您解决问题:
By adding following CSS will do the trick for you:
.rwt__tab {
width: 100%
}
另一种方法是通过添加以下行在组件中导入 CSS 文件:
Another way is to import the CSS file in your component by adding the following line:
import 'react-web-tabs/dist/react-web-tabs.css';
这是示例,供您参考.
这篇关于如何使用 React 制作垂直标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!