如何设计离子2中标签的徽章？

我希望覆盖离子2中tabBadge的默认字体大小，重量和样式，以便在不同形状因子上保留可用的不动产。如何设计离子2中标签的徽章？

<ion-tabs tabsHighlight="true"> 
    <ion-tab [root]="tabOne" [tabBadge]="badgeOne" [tabTitle]="titleOne"></ion-tab> 
    <ion-tab [root]="tabTwo" [tabBadge]="badgeTwo" [tabTitle]="titleTwo"></ion-tab> 
</ion-tabs>

ionic 2 documentation - 没有提及造型变量细节tabBadge。

欣赏帮助。

来源

2016-12-27 Prasanna Neelavar

徽章API文档（而不是他们的组件文档）可以在https://ionicframework.com/docs/v2/api/components/badge/Badge/

找到它们指示遵循两个可用青菜变量您：

$徽章字体大小1.3rem徽章的字体大小

$徽章字体重量徽章

另外的粗体字体重量;如果你去https://ionicframework.com/docs/v2/theming/overriding-ionic-variables/并搜索“徽章”，你会得到另外十几个选项。

外的，可能有更多的无证项可用，或者你可以直接针对CSS类为您通过文档检查器找到他们

来源

2016-12-27 23:42:55

'$徽章字体size'＆'$徽章字体weight'参考到''的样式，而不是我在'' –

中寻找的'tabBadge'另外我尝试在相关的'.scss'中添加以下内容：'.tab-badge {...}'它目前解决了这个问题，但我不确定它是否是离子2中推荐的方法 - 而不是使用适当的样式变量。 –

如何设计离子2中标签的徽章？

回答

相关问题