feat(badge): adding new tab button with badge use case.

Author: joselrio

core/src/components/badge/test/hint/index.html

@@ -51,6 +51,7 @@
           <ion-list-header>
             <ion-label> Inside Avatar </ion-label>
           </ion-list-header>
+
           <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
             <ion-avatar size="xxsmall">
               <img src="/src/components/avatar/test/avatar.svg" />
@@ -105,11 +106,11 @@
           </div>
         </ion-list>
 
-
         <ion-list id="tab-button">
           <ion-list-header>
-            <ion-label> Inside Tab Button </ion-label>
+            <ion-label> Inside Tab Button - Top Icon </ion-label>
           </ion-list-header>
+
           <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
             <ion-tab-bar>
               <ion-tab-button href="" tab="tab-one">
@@ -139,7 +140,6 @@
               </ion-tab-button>
             </ion-tab-bar>
           </div>
-
           <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
             <ion-tab-bar>
               <ion-tab-button href="" tab="tab-one">
@@ -169,11 +169,72 @@
               </ion-tab-button>
             </ion-tab-bar>
           </div>
+        </ion-list>
 
-          
+        <ion-list id="tab-button-icon-bottom">
+          <ion-list-header>
+            <ion-label> Inside Tab Button - Bottom Icon </ion-label>
+          </ion-list-header>
 
-        </ion-list>
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-tab-bar>
+              <ion-tab-button href="" tab="tab-one" layout="icon-bottom">
+                <ion-label>Tab One</ion-label>
+                <ion-icon name="star"></ion-icon>
+                <ion-badge size="xxsmall" vertical="top" color="danger">9</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="icon-bottom">
+                <ion-label>Tab Two</ion-label>
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge size="xxsmall" vertical="top" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-three" layout="icon-bottom">
+                <ion-label>Tab Three</ion-label>
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge size="xxsmall" vertical="top" color="warning">999</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="icon-bottom">
+                <ion-label>Tab Four</ion-label>
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge size="xxsmall" vertical="top" color="success"></ion-badge>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </div>
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-tab-bar>
+              <ion-tab-button href="" tab="tab-one" layout="icon-bottom">
+                <ion-label>Tab One</ion-label>
+                <ion-icon name="star"></ion-icon>
+                <ion-badge size="xxsmall" vertical="bottom" color="danger">9</ion-badge>
+              </ion-tab-button>
 
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="icon-bottom">
+                <ion-label>Tab Two</ion-label>
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge size="xxsmall" vertical="bottom" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-three" layout="icon-bottom">
+                <ion-label>Tab Three</ion-label>
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge size="xxsmall" vertical="bottom" color="warning">999</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="icon-bottom">
+                <ion-label>Tab Four</ion-label>
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge size="xxsmall" vertical="bottom" color="success"></ion-badge>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </div>
+        </ion-list>
       </ion-content>
     </ion-app>
   </body>