Ionic badge Tab右上角数字或小红点图标

消息提示,右上角小红点或者数字提示

小红点

效果图如下

Ionic badge Tab右上角数字或小红点图标

小红点-底部tab

<ion-tab ng-class="{true:'tab-red-point',false:''}[true]" title="消息" icon-off="ion-msg" icon-on="ion-msg-selected" href="#/tab/message">

<ion-nav-view name="tab-message"></ion-nav-view>

</ion-tab>

Ionic badge Tab右上角数字或小红点图标

顶部

<div class="tabs-buttons bar-subheader">

<div class="button-bar">

<a class="button button-outline button-positive active" tab-state

ng-click="onTapMsg1()">

<span>待解决问题</span>

</a>

<a class="button button-outline button-positive" tab-state

ng-click="onTapMsg2()">

<span ng-class="{true:'red-point',false:''}[true]">通知</span>

</a>

</div>

</div>

Ionic badge Tab右上角数字或小红点图标

css

.tab-red-point:after,.red-point:after{

position: absolute;

content: ' ';

height: 6px;

width: 6px;

border-radius: 3px;

background-color: red;

}

.tab-red-point:after{

top: 7px;

right: 24%;

}

.red-point:after{

top: 10px;

right: 35%;

}

Ionic badge Tab右上角数字或小红点图标

badge数字

效果图如下

Ionic badge Tab右上角数字或小红点图标

代码

badge=" "可以放变量来显示,如果为0不会显示

相关文章

  1. Ionic使用Iconfont-阿里巴巴矢量图标库

    Ionic有个自己的图标库,但是有些需要的图标还是没有,下面介绍一下阿里巴巴的矢量图标库,在Ionic中如何使用 工具/原料 Ionic应用 Iconfont 下载图标 由于度娘限制,自己百度下载地址吧~ 输入"阿里巴巴矢量图标库"百度搜索第一位就是啦 打开网址,你可以选择右上角 ...

  2. [Ionic]图标-名称-启动画修改

    APP名字 修改项目目录下config.xml--name标签 在项目的根目录下创建resources文件夹 在文件夹中都放入 icon.png(应用图标,最小192x192px,不带圆角), splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px) (可以是pn ...

  3. Iphone去除角标.屏蔽appstore更新提示的方法

    --针对越狱用户-- 推荐插件:Springtomize 去除角标的模式:1手动去除角标 2永久屏蔽角标 步骤一 安装Springtomize 在Cydia中点击下方菜单最右面的搜索,搜索"Springtomize". 根据你的iOS版本选择"Springtomize ...

  4. [Ionic]App应用名字+应用图标+启动画的修改

    方法/步骤 [修改名字] 修改config.xml--name标签 [修改应用图标和启动画] //进入项目所在文件夹执行ionic resources 执行该命令后,会自动在resources文件夹下创建已添加的平台名称的文件夹,把相应素材放到文件夹如下图 resources/android/ico ...

  5. 如何修改CF杀敌图标.CF等级.CF杀敌声音

    工具/原料 百度搜索CF魔盒,或者自己找图片 杀敌图片和杀敌声音都可以编辑的 一般都有什么魔盒之类的,直接替换就好了,不过要想要自己喜欢的图片就接着往下看吧. 一.杀敌图片 杀敌图标位置[穿越火线\rez\UI\Mark] 枪杀一共6个 宽:158 高:158 badge_multi1.tga ba ...

  6. 华为mate8怎么取消系统更新提示 关闭小红点角标

    华为手机不论是mate系列.P系列还是荣耀系列,在有新的系统可以更新或者应用市场有新软件可以更新时,往往会在图标的右上角显示带有数字的小红点,这个小红点叫作"角标",那么如果取消该角标呢? 工具/原料 华为手机 隐藏角标 华为EMUI的较新版本支持隐藏角标功能,以荣耀6为例讲解, ...

  7. 怎么去除App Store上的小红点?(iPhone)

    果粉们有没有这样的困扰--App Store右上角总会有恶心的小红点提醒我们更新.但是,我们是不愿屈服的.那么,怎么抹点App Store上醒目的小红点呢?默笔最近get一个小技能,分享给大家. 0 iPhone怎么换上可爱的输入法皮肤? 工具/原料 iPhone 方法/步骤 在没有设置前,就如图所 ...

  8. 怎么修改CF等级.杀敌图标.声音等

    CF里的杀敌声音.杀敌图标.无线电.背景图片等都可以自己动手DIY. 还有一种方便的操作就是下载CF魔盒替换杀敌图标等. 工具/原料 杀敌声音.杀敌图标.无线电.背景图片等自己找或者在CF魔盒里面下载 杀敌图片 枪杀敌图片6个杀敌图标位置[穿越火线\rez\UI\Mark] 枪杀尺寸为 (必须是这个 ...

  9. 鼠标右键坏了,教你如何临时键盘应付简单操作

    生活上容易遇到鼠标坏了,或者突然无限鼠标没电的情况,在一时半刻没有新的鼠标代替,但是想继续操作,那只能懂得键盘了,不习惯的人用键盘代替鼠标的时候 相对会慢点,习惯后,也能很快. 0.回到桌面 1.打开桌面图标 2.选择选中任务栏的图标 3.选择中任务栏的小图标(右下角的) 4.操作右键 5.打开计算 ...