离子标签徽章
Ionic tabs Badge
我正在尝试在选项卡中的图标上添加徽章。
当前结果为:http://play.ionic.io/app/decfc14cb171
谁知道怎么把它们放在每个图标的右上角?
我尝试使用,但事实证明在其他方面问题更多,尽管使用"badge"属性更容易达到预期效果。有没有不使用 ion-tabs 复制它的方法?
我建议使用 Ionic 的 ion-tabs 指令,因为它 "first class" 支持徽章。 ion-tab 元素有一个 "badge" 属性,这使得向图标添加文本(在你的例子中是数字)变得非常容易。
我在这里写了一个演示:
http://play.ionic.io/app/c6e96276e8fd
添加标签的代码在这里:
<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>
结果如下所示:
[仅适用于 ioinc 1]
看到这个:http://play.ionic.io/app/52586f24b84d
您需要制作一个 class 和相对位置
.badge-container{
position: relative;
}
并这样分配给<i>
标签,徽章会自动调整
<i class="icon ion-home badge-container"><span class="badge badge-assertive">3</span></i>
其他选项卡也是如此
<i class="icon ion-ios-paper badge-container"><span class="badge badge-assertive">5</span></i>
现在您还可以通过为徽章提供边距等来进一步更改徽章的位置。
在最新的 Ionic 文档中出现了一种不同的执行方式:
在选项卡代码中使用 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>
它说 "danger" 是您在主题中定义的颜色...
希望对2017年的新人有所帮助!
我正在尝试在选项卡中的图标上添加徽章。 当前结果为:http://play.ionic.io/app/decfc14cb171
谁知道怎么把它们放在每个图标的右上角?
我尝试使用,但事实证明在其他方面问题更多,尽管使用"badge"属性更容易达到预期效果。有没有不使用 ion-tabs 复制它的方法?
我建议使用 Ionic 的 ion-tabs 指令,因为它 "first class" 支持徽章。 ion-tab 元素有一个 "badge" 属性,这使得向图标添加文本(在你的例子中是数字)变得非常容易。
我在这里写了一个演示:
http://play.ionic.io/app/c6e96276e8fd
添加标签的代码在这里:
<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>
结果如下所示:
[仅适用于 ioinc 1]
看到这个:http://play.ionic.io/app/52586f24b84d
您需要制作一个 class 和相对位置
.badge-container{
position: relative;
}
并这样分配给<i>
标签,徽章会自动调整
<i class="icon ion-home badge-container"><span class="badge badge-assertive">3</span></i>
其他选项卡也是如此
<i class="icon ion-ios-paper badge-container"><span class="badge badge-assertive">5</span></i>
现在您还可以通过为徽章提供边距等来进一步更改徽章的位置。
在最新的 Ionic 文档中出现了一种不同的执行方式:
在选项卡代码中使用 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>
它说 "danger" 是您在主题中定义的颜色...
希望对2017年的新人有所帮助!