如何使用Angular Material指令实现垂直标签页及下拉内容布局？

我来分享一个经过验证的方案，既能实现初始状态的垂直标签页，又能解决mat-select下拉菜单的显示问题：

1. 基础HTML结构 #

首先给mat-tab-group添加自定义类vertical-tabs，然后正常编写标签和内容：

<mat-tab-group class="vertical-tabs">
  <mat-tab label="标签页1">
    <div class="tab-content">
      <mat-form-field appearance="fill">
        <mat-label>选择选项</mat-label>
        <mat-select>
          <mat-option value="opt1">选项1</mat-option>
          <mat-option value="opt2">选项2</mat-option>
          <mat-option value="opt3">选项3</mat-option>
        </mat-select>
      </mat-form-field>
      <!-- 其他内容 -->
    </div>
  </mat-tab>
  <mat-tab label="标签页2">
    <div class="tab-content">标签页2的内容区域</div>
  </mat-tab>
  <mat-tab label="标签页3">
    <div class="tab-content">标签页3的内容区域</div>
  </mat-tab>
</mat-tab-group>

2. 核心CSS样式 #

通过自定义样式将标签栏改为垂直布局，同时修复mat-select下拉被截断的问题：

/* 整体垂直布局容器 */
.vertical-tabs {
  display: flex;
  flex-direction: row;
  height: 400px; /* 根据需求设置高度，也可以用min-height */
}

/* 垂直排列标签栏 */
.vertical-tabs .mat-tab-header {
  flex-direction: column;
  background-color: #fafafa;
  border-right: 1px solid #e0e0e0;
  min-width: 180px;
}

/* 调整标签项样式，占满宽度并左对齐 */
.vertical-tabs .mat-tab-label {
  width: 100%;
  justify-content: flex-start;
  padding-left: 16px;
}

/* 隐藏垂直布局下不需要的分页按钮 */
.vertical-tabs .mat-tab-header-pagination {
  display: none;
}

/* 调整标签指示器为左侧垂直样式 */
.vertical-tabs .mat-tab-indicator {
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: #1976d2; /* 匹配你的主题主色 */
}

/* 让内容区域占满剩余空间 */
.vertical-tabs .mat-tab-body-wrapper {
  flex: 1;
  padding: 20px;
}

/* 关键修复：解决mat-select下拉被标签页容器截断的问题 */
.vertical-tabs .mat-tab-body {
  overflow: visible !important;
}

3. 额外说明与优化 #

• 主题适配：如果你的项目使用了自定义Angular Material主题，可以调整mat-tab-header的背景色和mat-tab-indicator的颜色来匹配主题。
• 响应式调整：可以添加媒体查询，在小屏幕设备上自动切换回水平标签页：

@media (max-width: 768px) {
  .vertical-tabs {
    flex-direction: column;
    height: auto;
  }

  .vertical-tabs .mat-tab-header {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    min-width: auto;
  }

  .vertical-tabs .mat-tab-indicator {
    left: 0;
    top: auto;
    bottom: 0;
    height: 3px;
    width: 100%;
  }
}

这个方案已经在实际项目中验证过，既能实现垂直标签页的需求，又能确保mat-select的下拉菜单正常显示在组件下方，不会被容器截断。

内容的提问来源于stack exchange，提问作者A T