Angular 带有固定选项卡 Header 和固定 Div In Content 的材料选项卡

Question

试图做到这一点：

虽然我在固定选项卡 header 行方面取得了一些成功，但我无法让按钮也保持固定（我认为因为它是选项卡内容的一部分，而不是选项卡标题）

有什么想法/解决方案吗？ 我开始认为 angular 材质选项卡不适用于我的 UI。 是否可以手动为选项卡构建渲染的 html 并将工具栏按钮 div 移动到选项卡 header 容器中？

https://stackblitz.com/angular/mkdpjkxlemv

Answer 1

将固定的header下面的内容包裹到一个div中

<div class="header">
    <button mat-raised-button>Button 1</button>
    <button mat-raised-button>Button 2</button>
</div>
<div class="content">
     Content
</div>

根据需要给它一个固定的高度，然后将overflow设置为auto

.content{
  height: 40vh;
  overflow: auto;
  padding: 1em;
}

这是一个完整的工作示例。 希望这可以帮助。