Blueprintjs v4的Tabs组件是否支持将标签栏显示在面板底部

BlueprintJS Version 4 版本的 Tabs 组件原生仅内置标签栏位于顶部、左侧的配置项，没有直接提供标签栏放置在面板底部的官方属性，但该需求可以通过以下两种方式实现，不会破坏组件原有交互逻辑。

方案1：CSS样式覆盖（最轻量，优先推荐） #

无需改动组件原有JSX结构，仅通过自定义样式反转容器排列顺序、调整标签栏边框位置即可实现，代码侵入性最低：

• 给目标Tabs组件添加自定义类名，例如tabs-position-bottom
• 写入以下覆盖样式即可：

/* 反转垂直排列顺序，让标签栏显示在内容下方 */
.tabs-position-bottom {
  display: flex;
  flex-direction: column-reverse;
}
/* 移除标签栏默认上边框，添加下边框匹配底部视觉 */
.tabs-position-bottom .bp4-tab-list {
  border-top: none;
  border-bottom: 1px solid rgba(92, 112, 128, 0.4);
}
/* 调整选中标签的指示条位置，从标签顶部移至底部 */
.tabs-position-bottom .bp4-tab {
  border-top: none !important;
}
.tabs-position-bottom .bp4-tab[aria-selected="true"] {
  border-bottom: 3px solid #106ba3 !important;
}

方案2：复合组件拆分渲染（适合深度定制场景） #

BlueprintJS v4 的 Tabs 采用复合组件设计，支持拆分TabList和TabPanel手动控制渲染顺序，适合需要对标签栏做额外自定义交互的场景：

import { Tabs, Tab, TabList, TabPanel } from "@blueprintjs/core";

function BottomTabsDemo() {
  return (
    <Tabs id="bottom-tabs" defaultSelectedTabId="sheet1">
      {/* 优先渲染所有内容面板 */}
      <TabPanel id="sheet1" panel={<div>工作表1内容</div>} />
      <TabPanel id="sheet2" panel={<div>工作表2内容</div>} />
      <TabPanel id="sheet3" panel={<div>工作表3内容</div>} />
      {/* 标签栏放在内容末尾渲染，自然位于面板底部 */}
      <TabList
        style={{
          borderTop: "none",
          borderBottom: "1px solid rgba(92, 112, 128, 0.4)"
        }}
      >
        <Tab id="sheet1">工作表1</Tab>
        <Tab id="sheet2">工作表2</Tab>
        <Tab id="sheet3">工作表3</Tab>
      </TabList>
    </Tabs>
  );
}

注意：使用该方案时同样需要调整选中标签的边框样式，和方案1中的样式逻辑一致，避免选中指示条位置错位。

内容的提问来源于stack exchange，提问作者L. Blanc