mat-tab-group - Aligns items to the center, right and left

Question

It is possible to align the center, the right and the left, buttons using mat-tab-group? I'm using mat-tabs. How can I put elements with the name left on the left, elements like the center name on the center and elements with the name right on the right?

I tried to use this mat-align-tabs="center" to center some elements, but even this didn't work.

I used the following, but it only worked in one case ... I can't align the items in the three sections (center, right and left).

.mat-tab-labels {
    display: flex;
    justify-content: center !important;
}

Can someone help me to place the elements on the left, in the center and on the right and make all the buttons fit on the screen?

DEMO

code

<mat-sidenav-container fxFlexFill>
    <mat-sidenav-content fxFlexFill>
        <mat-tab-group mat-align-tabs="center">
            <mat-tab label="Left">Content 1</mat-tab>
            <mat-tab label="Left">Content 2</mat-tab>
            <mat-tab label="Center">Content 3</mat-tab>
            <mat-tab label="Center">Content 4</mat-tab>
            <mat-tab label="Center">Content 5</mat-tab>
            <mat-tab label="Center">Content 6</mat-tab>
            <mat-tab label="Right">Content 7</mat-tab>
            <mat-tab label="Right">Content 8</mat-tab>
            <mat-tab label="Right">Content 9</mat-tab>
            <mat-tab label="Right">Content 10</mat-tab>
            <mat-tab label="Right">Content 11</mat-tab>
        </mat-tab-group>
    </mat-sidenav-content>
</mat-sidenav-container>

Example

BartoszTermena BartoszTermena · Accepted Answer · 2020-03-02T12:47:17

Try something like this:

<mat-sidenav-container fxFlexFill>
    <mat-sidenav-content fxFlexFill>
        <mat-tab-group mat-align-tabs="center">
            <mat-tab label="Left">Content 1</mat-tab>
            <mat-tab label="Left">Content 2</mat-tab>
            <mat-tab class="center"label="Center">
        <div class="center">Content 3 </div>
      </mat-tab>
            <mat-tab label="Center">
          <div class="center">Content 4 </div>
      </mat-tab>
            <mat-tab label="Right">
         <div class="right">Content 5</div>
      </mat-tab>
            <mat-tab label="Right">
         <div class="right">Content 6 </div>
      </mat-tab>
        </mat-tab-group>
    </mat-sidenav-content>
</mat-sidenav-container>

scss:

.center {
  @at-root div#{&} { 
    text-align : center;
  }
}
.left {
  @at-root div#{&} { 
    text-align : left;
  }
}
.right {
  @at-root div#{&} { 
    text-align : right;
  }
}

Live: https://stackblitz.com/edit/angular-kjcfx2?file=src%2Fstyles.scss

mat-tab-group - Aligns items to the center, right and left

1 Answers