Angular tab - Невозможно разместить две кнопки вкладок по центру и 50% с

Question

Это мое приложение, которое я пытаюсь создать:

I am working on the blue tab, that is a Angular tab. My project is on Ionic, but i couldnt make the ionic tab to work, so i made a angular that i am more familirized with.

My goal is to make the two tab buttons with 50% witdh of the tab bar but i tried averything i cant make that.

My tab:

  {{eachMove}}  HP: {{this.pokemonHPShow [i]}}  Повреждение при перемещении: {{this.allMovesDamageArray [i]}}  {{this.tankItAwnserArray [i]}}     Контент 2 

У меня есть другие проблемы, но пока я пытаюсь решить эту. Боже, у меня есть css, и это зажигает вещи xD

Answer 1

Согласно документации 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>