CODEWITHSUNDEEP
angularjsmaterial-designangular-material
zinfandel
zinfandel

Reputation: 458

Display other elements next to md-tab but below the tabs header

I'm new to Angular Material and just found out about the md-tabs directive. I was wondering whether there is an easy way to insert a non-md-tab element to sit on the left (or right) of all md-tab elements, but below the tabs header. Mockup of what I am looking for:

enter image description here

I guess I could just duplicate the markup and insert it into every single tab, but that doesn't seem to be a very practical solution. In any case, just adding a non-md-tab element as first child of md-tabs did not work.

Edit: another solution I thought about would be to manually load tab content based on which element is selected in the header area - I know how to do that - but then I'd lose the smooth transition animation between tabs.

Upvotes: 0

Views: 457

Answers (1)

Iamisti
Iamisti

Reputation: 1710

I'd use a directive for that, since you have to include it into your every tab's content. It would simply do the trick.

Or you can use only md-tabs without placing every tab's content into md-tab. Make use of md-selected of md-tabs and activate your html node visibilities in the right way. In this case you can have something on the left, since you'll define the layout.

Upvotes: 0

Related Questions