时间戳

首页 > 解决方案 > 角度选项卡 - 不能将两个选项卡按钮居中和 50% witdh

html - 角度选项卡 - 不能将两个选项卡按钮居中和 50% witdh

问题描述

这是我正在尝试构建的应用程序：应用

我正在使用蓝色选项卡，即 Angular 选项卡。我的项目是在 Ionic 上，但我无法让 ionic 选项卡工作，所以我制作了一个我更熟悉的角度。

我的目标是使两个选项卡按钮具有 50% 的选项卡栏宽度，但我尝试了所有我无法做到的事情。

我的标签：

 <mat-tab-group color= "primary"  backgroundColor="primary" headerPosition="below">
        <mat-tab label="Oponent Damage" >
          <div *ngIf="this.pokemon1WasSelected && this.pokemon2WasSelected && this.leagueSelected && this.lifeCreated">
            <div *ngFor="let eachMove of this.leaguePokemon[this.pokemonNumber2].moves;let i=index">
              <ion-row>
                <ion-col><p>{{eachMove}}</p></ion-col>
                <ion-col size="3"><p> HP: {{this.pokemonHPShow[i]}}</p></ion-col>
                <ion-col><p> Move Damage: {{this.allMovesDamageArray[i]}}</p></ion-col>
              </ion-row>
              <ion-row>
                <ion-col>
                  <ion-progress-bar  [value]="pokemonHPbyMoveArray[i]"></ion-progress-bar>
                </ion-col>
                <ion-col  id="teste1" size="3">
                  <div>
                    <p [ngClass]="{'green-class': this.tankItAwnserArray[i] === 'YES!', 'orange-class': this.tankItAwnserArray[i] === 'Optional', 'red-class': this.tankItAwnserArray[i] === 'NO!' }"> {{this.tankItAwnserArray[i]}} </p>
                  </div>
                </ion-col>
              </ion-row>
            </div>
          </div>
        </mat-tab>
        <mat-tab label="Your Damage"> Content 2 </mat-tab>
      </mat-tab-group>

我还有其他问题，但现在我正在尝试解决这个问题。上帝，我有 css 和这点东西 xD

标签： htmlcssangularbuttontabs

解决方案

根据 Angular Material 文档，您可以使用mat-align-tabs="center".
在您的情况下，由于您希望标签具有 50% 的宽度，您可以简单地拉伸标签：

 <mat-tab-group mat-stretch-tabs color="primary" backgroundColor="primary" headerPosition="below">
  <mat-tab label="Oponent Damage" >...</mat-tab>
  <mat-tab label="Your Damage">...</mat-tab>
</mat-tab-group>

推荐阅读