我刚刚开始使用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. 角材md-tab标签大写/小写
- 5. 角2材料MD-标签尺寸
- 6. 角材料标签自定义HTML
- 7. 角度材质自定义标签
- 8. 角度材料滑动标签
- 9. 角度2材质标签和ngForm
- 10. 角度材质标签懒惰加载
- 11. 角材料MD-标签滚动内容
- 12. 刷新标签内容角材料
- 13. 角材料单独MD-标签体
- 14. 内部标签中的角度材质标签问题
- 15. 角度4材料标签加载标签选择
- 16. 使用角度2材质图标
- 17. 角材料标签不起作用(md-tabs)
- 18. 如何使用角度材质图标创建堆叠图标?
- 19. Angular 4如何禁用角度材质标签组中的标签导航?
- 20. 角材料标签适合于作为向导
- 21. 带角材料的垂直图标栏
- 22. 更改角度材料datePicker图标
- 23. 角材料和md图标指令
- 24. 量角器 - 无法点击角度材料标签
- 25. 用SourceTree制作标签
- 26. 绘制标签用作R
- 27. Android - 材料设计:带滑动标签的标签条(标题)
- 28. 使用.png作为标签图标
- 29. 使用Angular2材质创建标签
- 30. 试图制作基本标签
哇,这让我看起来很蠢:P 非常感谢! :) – madebysid
ABove代码笔连接不工作。 –