问题描述
我使用CSS垂直排列了我的棱角材质标签。不幸的是,没有显示导航到不可见选项卡的分页
我的容器具有固定的高度(最大高度:177像素),因此只能看到一定数量的标签。超过此固定高度时,应显示分页。
这是垂直标签的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个标签):
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)