Ant Design中实现Tabs组件纵向标题文字排列的技巧

在Ant Design组件库中，Tabs标签页组件是前端开发中常用的界面元素。当我们需要将标签页(tab)纵向排列时(即设置tabPosition为left或right)，默认情况下标签标题文字仍然是水平排列的，这可能会占用较多的水平空间。

问题背景

在实际项目开发中，我们经常会遇到需要优化界面空间利用率的需求。特别是当Tabs组件采用纵向排列时，如果能让标签标题文字也跟随纵向排列，可以显著减少组件占用的宽度，为内容区域留出更多空间。

解决方案

虽然Ant Design目前没有直接提供设置标签标题文字方向的属性，但我们可以通过CSS样式覆盖的方式实现这一效果。核心思路是使用CSS的writing-mode属性来控制文字的书写方向。

实现步骤

1. 首先设置Tabs组件的tabPosition为left或right
2. 然后通过CSS选择器定位到标签标题元素
3. 最后应用writing-mode属性实现文字纵向排列

代码示例

/* 纵向排列的标签页标题文字 */
.ant-tabs-left .ant-tabs-tab,
.ant-tabs-right .ant-tabs-tab {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

注意事项

1. writing-mode属性支持多个值，可以根据需求选择vertical-rl(从右到左纵向)或vertical-lr(从左到右纵向)
2. text-orientation属性可以控制文字的方向，mixed表示保持文字的自然方向
3. 不同浏览器对writing-mode的支持程度可能略有差异，建议在实际项目中测试兼容性
4. 文字纵向排列后，可能需要调整padding和margin来优化视觉效果

扩展思考

这种文字排列方式特别适合中文等字符宽度较大的语言界面，可以显著节省空间。对于国际化项目，可以考虑根据语言特性动态应用这种样式，为不同语言的用户提供最佳体验。

通过这种简单的CSS覆盖方式，我们可以在不修改Ant Design组件源代码的情况下，实现更加灵活多样的界面布局效果，满足特定项目的设计需求。