如何在 mat-tab-group 的同一行添加链接答案

【问题标题】：How to add an link in the same line as that of mat-tab-group如何在 mat-tab-group 的同一行添加链接
【发布时间】：2020-07-02 15:59:43
【问题描述】：

在一个角度模板文件中，我们有 2 个标签摘要和预览，我必须在同一行水平添加一个链接，该链接不属于 mat-tab-group，即它不是 mat-tab。通过用 div 包裹 mat-tab-group 并将链接放在另一个 div 中，我可以使它们水平对齐，但它会打开很多空白空间，下面会破坏外观。我应该制作“预览”和“查看调查仪表板”吗？第二个选项卡内相同标签的一部分，中间有一些空白 - 但在这种情况下，如果您单击预览或查看仪表板，它将具有相同的效果，即预览页面的部分，而我想被传送到仪表板。

它应该看起来像这样：

编辑：1 代码 sn-p：

<mat-tab-group animationDuration="0ms" dynamicHeight="true" 
                (selectedTabChange)="tabClick($event)" id="Survey-lib-webapp">
    <mat-tab label="Summary">
    ...
    </mat-tab>
    <mat-tab label="Preview">
    ...
    </mat-tab>
  </mat-tab-group>

【问题讨论】：

除非你使用 angularjs，否则我不确定我能否提供帮助（转移到 React）。但是最好也发布您的代码，或者甚至更好地包括一个代码框，以便人们可以玩您的演示并找到答案。我相信这会增加获得答案的机会..
@Mosh Feu，根据您的建议添加代码
可能是这样的？ stackoverflow.com/q/47247816/863110
@Mosh Feu，提供的链接中的解决方案仅部分有效。现在“查看仪表板”显示在预期位置。但是当你滚动时，它也会滚动。我已经将它包裹在一个 div 中并使用了 position:absolute。
it also scrolls 不应该滚动吗？

标签： css angular-material

【解决方案1】：

我通过以下方式解决了问题 - 具有相对位置的最外层 div 和具有绝对位置的 View Dashboard div。一个问题是 View Dashboard 链接变得不可点击，指针事件：auto 来救援。

<div style="position: relative;">
<div>
  <mat-tab-group animationDuration="0ms" dynamicHeight="true"  
  (selectedTabChange)="tabClick($event)" id="Survey-lib-webapp">

    <mat-tab label="Summary">
    ...
    </mat-tab>
    <mat-tab label="Preview">
    ...
    </mat-tab>
     </mat-tab-group>
</div>
<div style="position: absolute; top: 2vh; left: 75vw; z-index: 5;">
  <a style="font-size:1.285rem; font-weight:400;pointer-events: auto" href="#" (click)="onNavigateViewDashboard(dialogData)">View Dashboard</a>
</div>
</div>

我要感谢 @Mosh Feu 分享让我开始的链接。

【讨论】：