[英]Reduce the default width of mat-tab
There are a few ways to reduce the width of the mat-tab-group. 有几种方法可以减小mat-tab组的宽度。
1) Provide a custom class to your directive. 1)为您的指令提供自定义类。 On your component.html, we have added the .custom-tab-group
class to the mat tab directive. 在component.html上,我们已将.custom-tab-group
类添加到mat选项卡指令中。
<mat-tab-group class="custom-tab-group">
.
.
.
</mat-tab-group>
And on your css, define the class with the following properties 在您的CSS上,使用以下属性定义类
.custom-tab-group {
width:200px
}
Check out the working demo here . 在这里查看工作演示。
2) Overwrite the .mat-tab-group
class on your main style.css. 2)覆盖主style.css上的.mat-tab-group
类。 It is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration. 它与index.html,main.ts,package.json等位于同一目录级别。您可能需要添加!important声明。 Here is a demo . 这是一个演示 。
.mat-tab-group {
width: 200px!important;
}
3) On the component that uses the mat-tab, you will need to use the /deep/
shadow piercing to force the style. 3)在使用mat-tab的组件上,您需要使用/deep/
shadow穿孔来强制样式。 However, I would not recommend this method, as it will soon be deprecated . 但是,我不推荐这种方法,因为它很快就会被弃用 。 If you wish to use it, you will need to add the following css properties on your component.css file, 如果您想使用它,则需要在component.css文件中添加以下css属性,
/deep/.mat-tab-group {
width: 200px!important; /* you might or might not need to use the !important declaration */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.