css - 如何在垂直对齐的 Angular Material 选项卡（mat-tabs）上启用分页？

Question

我使用 CSS 垂直排列了我的角度材质选项卡。不幸的是，没有显示导航到不可见选项卡的分页

我的容器具有固定高度（最大高度：177px），因此只有一定数量的选项卡可见。超过此固定高度时，应出现分页。

这是我的垂直标签的 CSS / SCSS：

:host ::ng-deep {
  .mat-tab-group {
    flex-direction: row-reverse;

    .mat-tab-nav-bar,
    .mat-tab-header {
      border: 0;
    }

    .mat-tab-header {
      display: flex;
      align-items: flex-end;
      max-height: 177px;
      right: 50px;
      bottom: 50px;
      z-index: 2147483647;

      .mat-tab-labels {
        flex-direction: column;
        background: gray;

        .mat-tab-label {
          margin: 0;
          padding: 20px;
          cursor: pointer;
          &:not(:last-child) {
            border-bottom: 1px solid white;
          }

          &.mat-tab-label-active {
            background-color: white !important;
            width: 100%;
          }
        }
      }
    }

    .mat-tab-body-wrapper {
      width: 100%;
      height: 100%;
      display: table;
    }
  }
}

我的模板结构如下：

<content>
  <div class="main-wrapper i-wrapper">
    <div class="header">
      <div class="title">
        <h4>Title</h4>
      </div>
    </div>
    <mat-tab-group mat-align-tabs="end">
      <div *ngFor="let item of items; let i = index">
        <mat-tab label="{{i}}">
          <div class="device-map-container">
            <div class="device-map">
              <img id="img_equipment" [src]="apiUrl + '/path/to/svg/' + asset | sanitize">
              <a *ngFor="let data of SVGdata"
                 title="{{ data.title }}"
                 class="device-link">
              </a>
              <div class="wrapper">
                <!-- another angular component -->
              </div>
            </div>
          </div>
        </mat-tab>
      </div>
    </mat-tab-group>
  </div>
</content>

在开发工具中，模板如下所示：

<mat-tab-group _ngcontent-nnd-c412="" mat-align-tabs="end" animationduration="0ms" class="mat-tab-group mat-primary" ng-reflect-animation-duration="0ms">
   <mat-tab-header class="mat-tab-header" ng-reflect-selected-index="0" ng-reflect-disable-ripple="false" ng-reflect-disable-pagination="false">
      <div aria-hidden="true" mat-ripple="" class="mat-ripple mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-tab-header-pagination-disabled" ng-reflect-disabled="true">
         <div class="mat-tab-header-pagination-chevron"></div>
      </div>
      <div class="mat-tab-label-container">
         <div role="tablist" class="mat-tab-list" style="transform: translateX(0px);">
            <div class="mat-tab-labels">
               <div role="tab" mattablabelwrapper="" mat-ripple="" cdkmonitorelementfocus="" class="mat-ripple mat-tab-label mat-focus-indicator mat-tab-label-active ng-star-inserted" id="mat-tab-label-0-0" ng-reflect-disabled="false" tabindex="0" aria-posinset="1" aria-setsize="2" aria-controls="mat-tab-content-0-0" aria-selected="true" aria-disabled="false">
                  <div class="mat-tab-label-content">
                  </div>
               </div>
               <div role="tab" mattablabelwrapper="" mat-ripple="" cdkmonitorelementfocus="" class="mat-ripple mat-tab-label mat-focus-indicator ng-star-inserted" id="mat-tab-label-0-1" ng-reflect-disabled="false" tabindex="-1" aria-posinset="2" aria-setsize="2" aria-controls="mat-tab-content-0-1" aria-selected="false" aria-disabled="false">
                  <div class="mat-tab-label-content">
                  </div>
               </div>
            </div>
            <mat-ink-bar class="mat-ink-bar" style="visibility: visible; left: 0px; width: 50px;"></mat-ink-bar>
         </div>
      </div>
      <div aria-hidden="true" mat-ripple="" class="mat-ripple mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4 mat-tab-header-pagination-disabled" ng-reflect-disabled="true">
         <div class="mat-tab-header-pagination-chevron"></div>
      </div>
   </mat-tab-header>
   <div class="mat-tab-body-wrapper">
      <mat-tab-body role="tabpanel" class="mat-tab-body ng-tns-c380-10 mat-tab-body-active ng-star-inserted" id="mat-tab-content-0-0" ng-reflect-_content="[object Object]" ng-reflect-position="0" ng-reflect-origin="1" ng-reflect-animation-duration="0ms" aria-labelledby="mat-tab-label-0-0">
         <div class="mat-tab-body-content ng-tns-c380-10 ng-trigger ng-trigger-translateTab" style="transform: none;">
            <div _ngcontent-nnd-c412="" class="device-map-container ng-star-inserted" style="">
               <div _ngcontent-nnd-c412="" class="device-map">
                  <img _ngcontent-nnd-c412="" id="img_equipment" alt="" src="data:image/svg+xml;base64,...">
               </div>
            </div>
         </div>
      </mat-tab-body>
      <mat-tab-body role="tabpanel" class="mat-tab-body ng-tns-c380-11 ng-star-inserted" id="mat-tab-content-0-1" ng-reflect-_content="[object Object]" ng-reflect-position="1" ng-reflect-animation-duration="0ms" aria-labelledby="mat-tab-label-0-1">
         <div class="mat-tab-body-content ng-tns-c380-11 ng-trigger ng-trigger-translateTab" style="transform: translate3d(100%, 0px, 0px); min-height: 1px;">
            <!--container-->
         </div>
      </mat-tab-body>
   </div>
</mat-tab-group>

目前它看起来像这样（6 个元素可见。但容器中有超过 6 个选项卡）：