how to make material2 tabs to use full page size

3
votes

I want to create tab group having two tabs. Tab group should use the full page size and the individual tab should get equal width. Following is code that I am using

<md-tab-group fxFlexFill>
    <md-tab>
        <ng-template md-tab-label>
            <md-icon>description</md-icon> Content Privileges
        </ng-template>
        Content Privileges
    </md-tab>
    <md-tab>
        <ng-template md-tab-label>
            <md-icon>flash_on</md-icon> Application Privileges
        </ng-template>
        Application Privileges
    </md-tab>
</md-tab-group>

And here is the output of above

enter image description here

Tabs are not using the full width. And label icon and text is not aligned.

How can I do that?

3
cssangulartabsflexboxangular-material2

3 Answers

3
votes

For alignment Problem: I just use vertical-align:middle; in md-icon and changed div with span. Its seems working. 

<div>
  <md-tab-group >
    <md-tab>
        <ng-template md-tab-label>
            <md-icon style="vertical-align:middle;">description</md-icon> 
            <span class="title">Content Privileges</span>
        </ng-template>
        Content Privileges
    </md-tab>
    <md-tab>
        <ng-template md-tab-label>
            <md-icon style="vertical-align:middle;">flash_on</md-icon>
            <span class="title">Application Privileges</span>
        </ng-template>
        Application Privileges
    </md-tab>
  </md-tab-group>
</div>
2
votes

Just use mat-stretch-tabs with <mat-tab-group> for getting equal width. e.g-

<mat-tab-group mat-stretch-tabs>
  <mat-tab>
   ...
  </mat-tab>
  <mat-tab>
    ...
  </mat-tab >
</mat-tab-group>
1
votes

You can use following css to spread them evenly.

/deep/ .mat-tab-label {
    width: 50%;
}

demo