Angular's View Encapsulation design, sometimes makes it almost impossible to write a style for Material components. One of them is the mat-tab.
<mat-tab-group>
<mat-tab *ngFor="let item of data; index as i" [label]="i">
<ng-template mat-tab-label>
<div class='mytabstyle'>
{{i}}
</div>
</ng-template>
<div class='margin1em'>
// Your content here for each item
</div>
</mat-tab>
</mat-tab-group>
Change the mat-tab-labels display style.
ngAfterViewInit() {
let mt =
(document.getElementsByClassName('mat-tab-labels'))[0] as HTMLElement;
mt.style.display='grid';
mt.style.gridTemplateColumns='repeat(auto-fit, minmax(3em, 1fr))'
}
We use the now famous HTML5 grid, setting each tab width to 3em.
Here's the tab template CSS class 'mt'
.mt {
align-items: center;
box-shadow: 0px 1px 1px inset midnightblue;
box-sizing: border-box;
cursor: pointer;
display: grid;
grid-template-columns: 3em;
height: 27px;
justify-content: center;
opacity: 0.6;
white-space: nowrap;
}
It's a good start, but there's still some work to do on the selected tab underline... Note we did not parse a single style sheet, it was already done by the browser, we just pulled the parsedText to display here.
JWP2020 CSS parser
JWP2020 Material Tabs
Top comments (0)