Material: feat(tabs): add support for an md-tabs-header to fill empty space in tab bar

[Thaina]

Many times I use md-tabs there was just 2-5 tabs in a page and so there was empty area in tab header that could be utilize as information or some control. Putting a new md-tab make it an unnecessary selectable tab, put ng-diabled there and it cannot contain input

So I would like to propose that, we should have a tag for markup that empty area to contain anything like this. It should be an only single tag in one md-tabs and ignore multiple header

<md-tabs>
    <md-tab>
    </md-tab>
    <md-tab-header>
        //// any HTML here
    </md-tab-header>
</md-tabs>

[bersLucas]

You can use md-stretch-tabs to make the tabs stretch and remove white space. You can use this if you have less than 4 tabs reference

[Thaina]

@bersLucas The point is I want to have those white space still there and just contain some other things, not to remove it

[codymikol]

That seems like a bit of an edge case, but you could write a directive that can do what you're looking for.

This isn't a perfect example of what you're trying to accomplish but it should start you in the right direction.

https://codepen.io/codymikol/pen/bjmrBX

[Splaktar]

As pointed out above, md-stretch-tabs can be used for "Fixed Tabs". For "Clustered Tabs", we support md-center-tabs for center clustering and the default supports left side clustering. We don't currently support clustering tabs to the right side.

"Fixed Tabs" usually take up the full width of the component. "Clustered Tabs" do leave some white space in the tab bar. However, there is nothing in the tabs spec that would provide details about adding the proposed tab header to fill that space.

Thus this is not a core enhancement that we will support at this time.

However, it is certainly possible for you to create a custom directive and styling to make this specific behavior work in your app. An associate recently did this using Angular Material for a specific customer solution.