Issue
I want to remove the bottom border of the tabs group which in the image below is gray.
Here is a sample project to show of the code:
https://stackblitz.com/edit/angular-tabs-remove-bottom-border
Solution
The border can be found on the .mat-tab-header
class.
In your main.css file (or main.scss, styles.css or styles.scss), you can globally define
.remove-border-bottom .mat-tab-header {
border-bottom: none;
}
And in your HTML file, give the mat-tab-group
a class.
<mat-tab-group class="remove-border-bottom">
<!-- ... -->
</mat-tab-group>
Due to encapsulation, if you want to define the style in your component.scss file, you have to use ::ng-deep
:
.remove-border-bottom ::ng-deep .mat-tab-header {
border-bottom: none;
}
Answered By - Julien Ambos
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.