Tabs 离子标签徽章
我正在尝试在选项卡中的图标上添加徽章。 目前的结果是: 有人知道如何将它们放在每个图标的右上角吗 我尝试使用,但在其他方面证明问题更大,尽管使用“badge”属性更容易达到预期效果。有没有办法不使用离子标签复制它?我建议使用离子的指令,因为它对徽章有“一流”的支持。ion选项卡元素有一个“badge”属性,这使得向图标添加文本(在您的例子中是一个数字)非常容易 我在这里写了一个演示: 添加标记的代码如下所示:Tabs 离子标签徽章,tabs,icons,ionic-framework,ionic,badge,Tabs,Icons,Ionic Framework,Ionic,Badge,我正在尝试在选项卡中的图标上添加徽章。 目前的结果是: 有人知道如何将它们放在每个图标的右上角吗 我尝试使用,但在其他方面证明问题更大,尽管使用“badge”属性更容易达到预期效果。有没有办法不使用离子标签复制它?我建议使用离子的指令,因为它对徽章有“一流”的支持。ion选项卡元素有一个“badge”属性,这使得向图标添加文本(在您的例子中是一个数字)非常容易 我在这里写了一个演示: 添加标记的代码如下所示: <ion-tabs class="tabs-icon-top tabs-str
<ion-tabs class="tabs-icon-top tabs-striped">
<ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="3" badge style="badge-assertive">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon=" ion-ios-paper" href="#/tab/about" badge="5" badge-style="badge-assertive">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
结果如下所示:
<ion-tabs>
<ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabIcon="chatbubbles" [root]="tabTwo" tabBadge="14" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabIcon="musical-notes" [root]="tabThree"></ion-tab>
</ion-tabs>
[仅适用于ioinc 1] 见此:
您需要创建一个具有相对位置的类
.badge-container{
position: relative;
}
并将其分配给
标签。这样,徽章将自动调整
<i class="icon ion-home badge-container"><span class="badge badge-assertive">3</span></i>
3
其他选项卡也是如此<i class="icon ion-ios-paper badge-container"><span class="badge badge-assertive">5</span></i>
5
现在,您还可以通过为badge添加边距等来更改badge的进一步位置。在最新的爱奥尼亚文档中,出现了一种不同的方法: 在选项卡代码中使用tabBadget和tabBadgetStyle属性,如下所示:
<ion-tabs>
<ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabIcon="chatbubbles" [root]="tabTwo" tabBadge="14" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabIcon="musical-notes" [root]="tabThree"></ion-tab>
</ion-tabs>
上面写着“危险”是你在主题中定义的颜色
希望它能帮助新来的人在2017年找到答案 在我写的时候,我尝试了离子标签。问题是,有时我想基于某个表达式隐藏整个选项卡栏,但无法使用ion选项卡。按照我在示例中使用代码的方式,我无法获得与徽章相同的结果。为什么不能显示/隐藏离子标签栏?请参阅此处的示例,了解此解决方案不再有效。。。我发布了另一个2017/2018年有效的解决方案,请告诉我我的答案是否有用。对于
ionic 3
谢谢!这正是我要找的!