CODEWITHSUNDEEP
angularangular-material2
Cryptic Pug
Cryptic Pug

Reputation: 567

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.

Upvotes: 8

Views: 7011

Answers (4)

Hedeshy
Hedeshy

Reputation: 1386

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.

Upvotes: 0

Edric
Edric

Reputation: 26750

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

Upvotes: 6

Z. Bagley
Z. Bagley

Reputation: 9260

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.

Upvotes: 2

Aravind
Aravind

Reputation: 41571

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

Upvotes: 1

Related Questions