Angular 4 Material 2 - Center Tab Components

问题

I couldn't find out how to center the Angular Material Tab Component.

Can be seen here: https://material.angular.io/components/tabs/overview

I think there even is a way of doing it included, it is just very unclear what to do imo.

Below is a screenshot of the docs. What's meant by properties? Is it in html or does it need to be set in the typescript ?

I would really appreciate your help.

回答1:

Looks like what you're looking for is the md-stretch-tabs attribute, which should be applied on <md-tab-group>:

<md-tab-group md-stretch-tabs>
    <md-tab label="Tab 1">
        <p>Content for tab 1.</p>
    </md-tab>
    <md-tab label="Tab 2">
        <p>Content for tab 2.</p>
    </md-tab>
    ...
</md-tab-group>

Plunker

回答2:

This is an internal call that is not supposed to be exposed. An issue an pull request to fix this have been made, but you will not be able to use this API call.

Check this issue on github for updates.

Sorry this isn't the answer you were looking for.

回答3:

You can set the position value when you are projecting a content by using md-tab-body attribute.

This position value should be set using the typescript code.

<md-tab-group>
  <md-tab label="Tab 1"  >
     <div md-tab-body #tab >
      <button (click)="clickedMe()">Clicked</button>
    </div>
  </md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

Typescript code

  @ViewChild('tab') tab: TemplateRef;
   ngAfterViewInit(){
     console.log(this.tab);
     this.tab.position = 100;
   }
   ngAfterContentInit(){
     console.log(this.tab);
   }
   clickedMe(){
     console.log(this.tab);
   }

LIVE DEMO

回答4:

I have also tried to align them in the center using the position in the API calls first. However, after giving up, I have added the following to the component style:

.mat-tab-labels{
    justify-content: center;
}

Then, included the encapsulation decorator in my component typescript file:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'mytabs',
    templateUrl: './mytabs.component.html',
    styleUrls: ['./mytabs.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Try it on Stackblitz

"md-stretch-tab" attribute mentioned by @Edrik, as it is stated in its name, stretches the tabs. However, in this approach we just align them in the center.

来源：https://stackoverflow.com/questions/45256199/angular-4-material-2-center-tab-components

标签

angular

angular-material2