feat(badge): Adding sample section when inside tab button.

Author: joselrio

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

@@ -97,6 +97,73 @@
               <ion-badge color="danger" size="large" vertical="bottom"></ion-badge>
             </ion-avatar>
           </div>
+        </div>
+
+
+          <ion-list id="tab-button">
+            <ion-list-header>
+              <ion-label> Inside Tab Button </ion-label>
+            </ion-list-header>
+            <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+              
+              <ion-tab-button href="" tab="tab-one">
+                <ion-label>Tab One</ion-label>
+                <ion-icon name="star"></ion-icon>
+                <ion-badge vertical="top" color="danger">9</ion-badge>
+              </ion-tab-button>
+    
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton">
+                <ion-label>Tab Two</ion-label>
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge vertical="top" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+    
+              <ion-tab-button tab="tab-three">
+                <ion-label>Tab Three</ion-label>
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge vertical="top" color="warning">999</ion-badge>
+              </ion-tab-button>
+    
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton">
+                <ion-label>Tab Four</ion-label>
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge vertical="top" color="success"></ion-badge>
+              </ion-tab-button>
+
+            </div>
+            <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+              
+              <ion-tab-button href="" tab="tab-one">
+                <ion-label>Tab One</ion-label>
+                <ion-icon name="star"></ion-icon>
+                <ion-badge vertical="bottom" color="danger">9</ion-badge>
+              </ion-tab-button>
+    
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton">
+                <ion-label>Tab Two</ion-label>
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge vertical="bottom" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+    
+              <ion-tab-button tab="tab-three">
+                <ion-label>Tab Three</ion-label>
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge vertical="bottom" color="warning">999</ion-badge>
+              </ion-tab-button>
+    
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton">
+                <ion-label>Tab Four</ion-label>
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge vertical="bottom" color="success"></ion-badge>
+              </ion-tab-button>
+
+            </div>
+          </div>
+
         </ion-list>
       </ion-content>
     </ion-app>