mat-tab-group-将项目对齐到中心，左右对齐 [英] mat-tab-group - Aligns items to the center, right and left

问题描述

是否可以使用mat-tab-group对齐中心，左右按钮? 我正在使用mat-tabs.我该如何放置名称左侧的元素，中心名称(例如中心)和名称右侧的元素?

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?

我尝试使用此mat-align-tabs="center"将某些元素居中，但即使这样也不起作用.

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?

演示

代码

<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>

示例

推荐答案

尝试如下操作:

<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;
  }
}

实时: https://stackblitz.com/edit/angular -kjcfx2?file = src％2Fstyles.scss

这篇关于mat-tab-group-将项目对齐到中心，左右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！