如何调整TWebPageControl组件的标签至底部或左侧？

TWebPageControl默认没有像FireMonkey的TTabControl那样直接的TabPosition属性，但可以通过自定义CSS样式结合组件属性实现标签底部或左侧对齐的效果，具体步骤如下：

一、实现标签底部对齐 #

1. 给TWebPageControl设置自定义样式类
   在Delphi代码的窗体创建事件中，为组件指定自定义CSS类：

   procedure TForm1.FormCreate(Sender: TObject);
   begin
     WebPageControl1.CustomTabsClass := 'nav-tabs-bottom';
   end;
   

2. 添加自定义CSS样式
   在项目的style.css文件（或通过TWebHTMLComponents添加内嵌样式）中加入以下CSS：

   .nav-tabs-bottom {
     display: flex;
     flex-direction: column;
   }
   .nav-tabs-bottom .nav-tabs {
     order: 2;
     border-bottom: none;
     border-top: 1px solid #dee2e6;
     margin-top: 0.5rem;
   }
   .nav-tabs-bottom .tab-content {
     order: 1;
     border: 1px solid #dee2e6;
     border-bottom: none;
     padding: 1rem;
   }
   .nav-tabs-bottom .nav-link.active {
     border-top: 2px solid #0d6efd;
     border-bottom: 1px solid #fff;
     margin-bottom: -1px;
   }
   

二、实现标签左侧对齐 #

1. 设置自定义样式类
   同样在窗体创建事件中指定类名：

   procedure TForm1.FormCreate(Sender: TObject);
   begin
     WebPageControl1.CustomTabsClass := 'nav-tabs-left';
   end;
   

2. 添加对应CSS样式

   .nav-tabs-left {
     display: flex;
   }
   .nav-tabs-left .nav-tabs {
     flex-direction: column;
     border-right: 1px solid #dee2e6;
     border-bottom: none;
     margin-right: 0.5rem;
   }
   .nav-tabs-left .tab-content {
     flex: 1;
     border: 1px solid #dee2e6;
     border-left: none;
     padding: 1rem;
   }
   .nav-tabs-left .nav-link.active {
     border-right: 2px solid #0d6efd;
     border-left: 1px solid #fff;
     margin-left: -1px;
   }
   

说明 #

• 上述样式基于Bootstrap的默认样式调整，可根据项目的主题色修改#0d6efd（默认蓝色）为自定义颜色。
• 若使用TMS WEB Core的新版本，可检查组件是否已新增TabPosition属性（部分版本已支持直接设置），优先使用内置属性简化开发。

内容的提问来源于stack exchange，提问作者Shaun Roselt