Geek Answers Handbook

Creating icon tabs using Angular Material?

I am just starting with Angular stuff. I was wondering if there is a way to display tabbed icons instead of plain text labels. My problem is that I use it to create a mobile application, and the tab text is too large to fit.

+5
source share
3 answers

There are two supported syntaxes for md-tabs : one of them uses the label attribute, and the other uses md-tab-label and md-tab-body as tags. This syntax has been added specifically for this use case.

The syntax you use is:

 <md-tabs> <md-tab label="One"> Tab One Content </md-tab> </md-tabs>

The syntax you are most likely looking for is:

 <md-tabs> <md-tab> <md-tab-label>One</md-tab-label> <md-tab-body>Tab One Content</md-tab-body> </md-tab> </md-tabs>

Here CodePen demonstrates this syntax:

http://codepen.io/robertmesserle/pen/7bbeaf916d45ac2dde4967cf57307338?editors=100

+12
source

To build Robert's answer, you can even make a combination of the icon and text on the tab.

  <md-tab id="tab1" class="less-padding"> <md-tab-label> <section layout="column" layout-align="center center"> <md-icon md-svg-src=".svg" class="md-accent"></md-icon> Yes/No </section> </md-tab-label> <md-tab-body> View for Item #1 <br/> data.selectedIndex = 0; </md-tab-body> </md-tab>

Finally, edit the CSS padding specified for .md-tab, where the default padding is "padding: 12px 24px;". Make the top and bottom padding as 1px and you should be good! Hope this helps someone!

+2
source

I get it. Since you can only provide the label attribute for it, I made my own dingbat font. There was a lot of work, but it worked at the end, so it was worth what I think.

If someone is stuck, this is what I did: http://www.zoersel-tv.be/edius/inkscape-dingbats.pdf

0
source

More articles:


All Articles