如何解决在 mat-tab-group 上制作粘性标题
我正在使用 mat-tab-group 并且我希望在向下滚动到内容时修复选项卡标题。所以,我固定了标签内容的高度。我可以滚动浏览带有固定标题的内容。但是,然后我在页面上看到两个滚动条,这很奇怪。有没有其他方法可以在滚动内容时修复选项卡标题?附上代码片段:
<mat-tab-group>
<mat-tab label="Tab 1">
<div style="overflow: scroll; height: 50%">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</mat-tab>
<mat-tab label="Tab 2">Tab 2</mat-tab>
<mat-tab label="Tab 3">Tab 3</mat-tab>
</mat-tab-group>
[编辑]:我更希望修复 mat-tab 的标题。那么,有没有什么直接的方法可以代替在样式中固定高度?
解决方法
更改 overflow
样式,例如:
<div style="overflow-x: auto; overflow-y: visible; height: 50%">
因此,只有在需要时才会显示水平滚动,而不会出现垂直滚动。
,app.component.html
Copy ID
app.component.scss
<mat-tab-group>
<mat-tab label="Content 1"> Content </mat-tab>
<mat-tab label="Content 2"> Content </mat-tab>
<mat-tab label="Content 3"> Content </mat-tab>
</mat-tab-group>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。