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;
}

這是一個完整的工作示例。 希望這可以幫助。