Angular 4 Material tabs - css not applied to header template

1
votes

I'd like to hide the header (Buttons) of the Angular Material Tabs, because I'm using custom navigation buttons to switch between the tabs. https://material.angular.io/components/tabs/overview

However, it is not possible to hide the header using css. I don't know why. md-tab-groupis an angular directive, which is replaced with the tabs template. Despite it usually shout work this way...

HTML:

     <div class="tabs">
        <md-tab-group>
           <md-tab label="Tab 1">Content 1</md-tab>
           <md-tab label="Tab 2">Content 2</md-tab>
        </md-tab-group>
     </div>

CSS:

     .tabs md-tab-header, .tabs .mat-tab-header {
        display: none;
     }
3
cssangularangular-material2
why there is a , comma in place ? - Aravind
This way you can declare a style for different css classes. But this is not causing the problem, i've also tried it separately. - btx
In the LESS file you can use them. can you create a plunker to reproduce. Refer this answer if it helps you - Aravind

3 Answers

10
votes

You can try the following css:

::ng-deep .tabs .mat-tab-list .mat-tab-labels {
        display: none;
}

html:

<md-tab-group class="tabs">
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

Plunker

0
votes
Angular4:

template:  
<mat-tab-group class="tabs">
    <mat-tab>
        <ng-template mat-tab-label>Tasks<ng-template>
        <app-ongoingtasks></app-ongoingtasks>
    </mat-tab>
</mat-tab-group>

css:
::ng-deep .tabs .mat-tab-list .mat-tab-labels {
    margin: auto;
    width: 60%;
}

Perfect!
0
votes

For me replacing:

.mat-tab-header{
  background: red !important;
}

to:

::ng-deep .mat-tab-header{
  background: red !important;
}

worked !