Material: Centered tabs

[remicastaing]

Is there a way to center tabs like in G+?

[bonatoc]

On line 48 of https://github.com/angular/material/blob/master/src/components/tabs/tabs.scss,
it looks like center is an (ng-)attribute of md-tabs.

I have no time to try it right now, but I would like if you give me some feedback if you test it, thank you.

[bonatoc]

I think you can "only" stretch them, see the doc.

So maybe you can place them into another fixed-width container that is centered (think flexbox), so the tabs do not stretch on all the topnav's width, like in the example you are showing.

[bonatoc]

OK I think I have it. See this codepen and please let me know.

[remicastaing]

It works well. Thank you, @bonatoc for taking the time.

I adapted your code a little for small sized screen: codepen.

[remicastaing]

Should we keep this issue open and tagged as improvement?

[bonatoc]

I'm not sure.

We could contribute by making a md-centered-tabs attribute following the "wrapped-inside-centered-container" method in the codepen above and request a pull.

But I think the md-stretch-tabs attribute already does the job.
Frameworks are there to be hacked, worked with.
We can't expect them to have all the options, and I don't think it is the way to go. You end up overbloating it (see Bootstrap...).

[bonatoc]

Maybe you could tagged the issue as improvement for the demos ?

Many devs would like the centered tabs option displayed as an example.

Can we fork the docs a make a pull request on the demos?

[remicastaing]

I tried to write a simple md-centered-tabs directive, but it is not simple. I gave up.

Your solution, @bonatoc, should be kept somewhere. She's very useful.

[robertmesserle]

Support for centered tabs is on my list, and I will be hopefully getting to this today.

[remicastaing]

Awesome @robertmesserle. And again, thanks @bonatoc.

[bonatoc]

Awesome @robertmesserle

@remicastaing , you're welcome. I was on the same issue myself.

[d668]

both codepens don't work for me

so can i use centered tabs?

[bonatoc]

@super-coder — if you're super, please provide more info: version, specific problem?

[d668]

[prasad47]

md-center-tabs="true" did the trick just like that FYI

[d668]

i submitted an issue https://github.com/angular/material/issues/7695, tabs are hidden after reload on IE on XS screen

[bonatoc]

@super-coder — Please provide IE version.

[d668]

@bonatoc what do you mean? you don't understand how code doesn't work in IE?? There is no IE version

[bonatoc]

"There is no IE version" - I beg your pardon?

[d668]

@bonatoc you can see the screen in https://github.com/angular/material/issues/7695

[bonatoc]

Like tagged: "need more info".

[d668]

added more info there

[YonathanMeguira]

just for you to know this works wonders as well

[YonathanMeguira]

here's the working code
<md-center-tabs> <md-tabs md-cnter-tabs="true" md-dynamic-height md-border-bottom> <md-tab label="Policy Dashboard"> <md-content class="md-padding"> <h1 class="md-display-2">Policy Dashboard</h1> <p>{{lorem}}</p> </md-content> </md-tab> <md-tab label="What is this policy?"> <md-content class="md-padding"> <h1 class="md-display-2">What is this policy?</h1> <p>{{lorem}}</p> </md-content> </md-tab> <md-tab label="Who uses this Policy?"> <md-content class="md-padding"> <h1 class="md-display-2">Who uses this Policy?</h1> <p>{{lorem}}</p> </md-content> </md-tab> </md-tabs> </md-center-tabs>

[YonathanMeguira]

replace ({lorem}} by the content of your choice of course

[TXZdream]

Just add md-center-tabs="true" in md-tabs is OK, jonathanmeguira's code doesn't work because he spell mistake 'center'.

[YonathanMeguira]

my bad @TXZdream

[Zwilla]

open angular.material.js and search for: material.components.tabs
there you will find everything about the tabs and how they work.

Source Code

• https://github.com/angular/material/tree/master/src/components/tabs

build*

• https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.js

EXAMPLE:
<md-tabs mdTabScroll md-align-tabs="top" md-selected="0" md-dynamic-height md-border-bottom layout-fill md-stretch-tabs="always" md-center-tabs md-swipe-content>