Ant Tabs竖直排布、文字竖直排布样式修改

F_-_-_

于 2022-12-24 12:04:58 发布

阅读量1.1k

点赞数

分类专栏：前端学习文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/qq_56936051/article/details/128427409

版权

前端学习专栏收录该内容

3 篇文章

订阅专栏

该博客讨论了在使用Ant Design库的Tabs组件时遇到的字体大小设置不生效的问题，引用了GitHub上的Issue #8773。内容提到了TabPane的垂直文字方向设置，并展示了不同Tab的内容，包括Setting、Similar和UnSimilar选项。作者可能在寻求或者分享解决此类样式问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<Tabs defaultActiveKey="1" tabPosition="left" size="small" >
   <TabPane key="1" tab={<span style={{writingMode:'vertical-rl'}}>Setting</span>}>
     <h2>00000</h2>
   </TabPane>
   <TabPane tab={<span style={{writingMode:'vertical-rl'}}>Similar</span>} key="2">
     <h2>11111</h2>
   </TabPane>
   <TabPane tab={<span style={{writingMode:'vertical-rl'}}>UnSimilar</span>} key="3">
     <h2>22222</h2>
   </TabPane>
</Tabs>

如上图，我参考了如下issue：“tabs component" tabBarStyle set 'font-size' can't work · Issue #8773 · ant-design/ant-design · GitHub