我剛剛開始使用Angular Material。我想知道是否有一種方法可以在選項卡上顯示圖標而不是常規文本標籤。我的問題是,我正在使用它來建立一個移動應用程序,並且標籤文本太大而無法適應。用角材製作圖標標籤?
5
A
回答
12
有兩種支持的語法來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
0
我想通了。 由於您只能爲其提供標籤屬性,因此我製作了自己的dingbat字體。工作很多,但最終奏效了,所以我想這是值得的。
如果有人卡住了,這是我做的: http://www.zoersel-tv.be/edius/inkscape-dingbats.pdf
2
建立在羅伯特的答案上,你甚至可以做一個組合圖標和標籤中的文字。
<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,你應該很好去!希望它能幫助別人!
相關問題
- 1. 角材2標籤
- 2. 角材料標籤
- 3. 角材料圖標造型
- 4. 角2材料MD-標籤尺寸
- 5. 角度材料滑動標籤
- 6. 角度材質自定義標籤
- 7. 角材料標籤自定義HTML
- 8. 角材料單獨MD-標籤體
- 9. 角度4材料標籤加載標籤選擇
- 10. 使用角度2材質圖標
- 11. 角材料標籤不起作用(md-tabs)
- 12. Angular 4如何禁用角度材質標籤組中的標籤導航?
- 13. 帶角材料的垂直圖標欄
- 14. 更改角度材料datePicker圖標
- 15. 量角器 - 無法點擊角度材料標籤
- 16. 視圖控制器改變標籤欄圖標和動作
- 17. 使用Angular2材質創建標籤
- 18. 如何使用jquery在DIV標籤內製作圓角框?
- 19. 如何使用jquery和css3製作角度標籤界面?
- 20. 角NG-標籤 - 輸入最大標籤不工作
- 21. 如何將內容添加到角材料標籤
- 22. 如何獲得激活的標籤在角材質
- 23. 角材md-tab模擬一個標籤點擊?
- 24. 從模板添加動態內容在MD-標籤角材料
- 25. 防止角材料中的標籤更改事件md-tab
- 26. 拖放兩個角度材料標籤之間
- 27. 角材料。如何使用圖標創建md-select?
- 28. 在角材2中使用社交圖標
- 29. 如何製作標籤?
- 30. 如何製作N標籤?
哇,這讓我看起來很蠢:P 非常感謝! :) – madebysid
ABove代碼筆連接不工作。 –