有人可以为我提供一种使用 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>
);
}
}
到目前为止,它显示基本的水平选项卡,我想修复此代码,因为它显示垂直选项卡。如果您推荐任何其他方式,我们也将不胜感激。
通过添加以下 CSS 即可为您解决问题:
.rwt__tab {
width: 100%
}
另一种方法是通过添加以下行将 CSS 文件导入组件中:
import 'react-web-tabs/dist/react-web-tabs.css';
这里是example https://codesandbox.io/s/wo70qkvyq7如果供您参考。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)