feat(tabs): add ability to add badges to the tab

Can now add badges to a tab but can’t style them yet.

References #5007

ionic/components/tabs/tab-button.ts

@@ -18,6 +18,7 @@ import {Config} from '../../config/config';
     '[class.has-icon]': 'hasIcon',
     '[class.has-title-only]': 'hasTitleOnly',
     '[class.icon-only]': 'hasIconOnly',
+    '[class.has-badge]': 'hasBadge',
     '[class.disable-hover]': 'disHover'
   }
 })
@@ -27,6 +28,7 @@ export class TabButton extends Ion {
   private hasIcon: boolean;
   private hasTitleOnly: boolean;
   private hasIconOnly: boolean;
+  private hasBadge: boolean;
 
   @Input() tab: Tab;
   @Output() select: EventEmitter<Tab> = new EventEmitter();
@@ -42,10 +44,11 @@ export class TabButton extends Ion {
     this.hasIcon = !!this.tab.tabIcon;
     this.hasTitleOnly = (this.hasTitle && !this.hasIcon);
     this.hasIconOnly = (this.hasIcon && !this.hasTitle);
+    this.hasBadge = !!this.tab.tabBadge;
   }
 
   @HostListener('click')
   private onClick() {
     this.select.emit(this.tab);
   }
-}
+}

ionic/components/tabs/tab.ts

@@ -103,6 +103,7 @@ export class Tab extends NavController {
   @Input() root: Type;
   @Input() tabTitle: string;
   @Input() tabIcon: string;
+  @Input() tabBadge: string;
   @Output() select: EventEmitter<any> = new EventEmitter();
 
   constructor(

ionic/components/tabs/tabs.scss

@@ -136,3 +136,27 @@ tab-highlight {
 [tabbarIcons=hide] .tab-button-icon {
   display: none;
 }
+
+// Tab Badges
+// --------------------------------------------------
+
+.tab-badge {
+  position: absolute;
+  top: 4%;
+  right: 4%;
+  right: calc(50% - 50px);
+  padding: 1px 6px;
+  height: auto;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.has-icon .tab-badge {
+  right: calc(50% - 30px);
+}
+
+[tabbarIcons=bottom] .tab-badge,
+[tabbarIcons=left] .tab-badge,
+[tabbarIcons=right] .tab-badge {
+  right: calc(50% - 50px);
+}

ionic/components/tabs/tabs.ts

@@ -48,6 +48,7 @@ import {isUndefined} from '../../util/util';
         '<a *ngFor="#t of _tabs" [tab]="t" class="tab-button" role="tab">' +
           '<ion-icon [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' +
           '<span class="tab-button-text">{{t.tabTitle}}</span>' +
+          '<ion-badge *ngIf="t.tabBadge" class="tab-badge">{{t.tabBadge}}</ion-badge>' +
         '</a>' +
         '<tab-highlight></tab-highlight>' +
       '</tabbar>' +

ionic/components/tabs/test/badges/index.ts

@@ -0,0 +1,9 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
+
+document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'

ionic/components/tabs/test/badges/main.html

@@ -0,0 +1,46 @@
+
+<!-- Text -->
+<ion-tabs no-navbar>
+  <ion-tab tabTitle="Recents"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabBadge="32"></ion-tab>
+  <ion-tab tabTitle="Settings"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons -->
+<ion-tabs no-navbar>
+  <ion-tab tabIcon="call"></ion-tab>
+  <ion-tab tabIcon="heart"></ion-tab>
+  <ion-tab tabIcon="settings" tabBadge="all"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons on top of text -->
+<ion-tabs no-navbar>
+  <ion-tab tabTitle="Location" tabIcon="navigate" tabBadge="11"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="star"></ion-tab>
+  <ion-tab tabTitle="Radio" tabIcon="musical-notes"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons below text -->
+<ion-tabs tabbarIcons="bottom" no-navbar>
+  <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" tabBadge="577"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons right of text -->
+<ion-tabs tabbarIcons="right" no-navbar>
+  <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" tabBadge="1030"></ion-tab>
+</ion-tabs>
+
+<!-- Icons left of text -->
+<ion-tabs tabbarIcons="left" no-navbar>
+  <ion-tab tabTitle="Recents" tabIcon="call" tabBadge="32"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
+</ion-tabs>

ionic/components/tabs/test/badges/styles.css

@@ -0,0 +1,12 @@
+
+ion-tabs {
+  position: relative;
+  top: auto;
+  height: auto;
+  margin-bottom: 20px;
+}
+
+ion-navbar-section,
+ion-content-section {
+  display: none !important;
+}

ionic/components/tabs/test/tab-bar-scenarios/main.html

@@ -46,6 +46,7 @@
   <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
 </ion-tabs>
 
+
 <!-- No icons -->
 <ion-tabs tabbarIcons="hide" no-navbar>
   <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
@@ -53,6 +54,7 @@
   <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
 </ion-tabs>
 
+
 <!-- No overflow text -->
 <ion-tabs no-navbar>
   <ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark"></ion-tab>
@@ -62,7 +64,7 @@
 
 
 <!-- primary color tabbar -->
-<ion-tabs no-navbar tabbar-style="primary">
+<ion-tabs no-navbar primary>
   <ion-tab tabIcon="call"></ion-tab>
   <ion-tab tabIcon="heart"></ion-tab>
   <ion-tab tabIcon="settings"></ion-tab>