用角材製作圖標標籤？

Question

我剛剛開始使用Angular Material。我想知道是否有一種方法可以在選項卡上顯示圖標而不是常規文本標籤。我的問題是，我正在使用它來建立一個移動應用程序，並且標籤文本太大而無法適應。

Answer 1

有兩種支持的語法來md-tabs：他們中的一個使用label屬性和其他用途的md-tab-label和md-tab-body作爲標記。這個語法是專門爲這個用例添加的。

的語法使用的是：

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

，你是最有可能尋找的語法：

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

這裏有一個CodePen證明這句法：

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

Answer 2

我想通了。 由於您只能爲其提供標籤屬性，因此我製作了自己的dingbat字體。工作很多，但最終奏效了，所以我想這是值得的。

如果有人卡住了，這是我做的： http://www.zoersel-tv.be/edius/inkscape-dingbats.pdf

Answer 3

建立在羅伯特的答案上，你甚至可以做一個組合圖標和標籤中的文字。

 <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> 

最後，編輯默認填充爲「padding：12px 24px;」的.md-tab給定的CSS填充。使頂部和底部填充爲1px，你應該很好去！希望它能幫助別人！