mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
8cfebe1386
BREAKING CHANGES: `tabbarIcons` has been replaced with `tabbarLayout` with the following values: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`. closes #5625
54 lines
1.8 KiB
HTML
54 lines
1.8 KiB
HTML
|
|
<!-- 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" tabBadgeStyle="primary"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
|
|
<!-- Icons on top of text -->
|
|
<ion-tabs no-navbar>
|
|
<ion-tab tabTitle="Location" tabIcon="navigate" tabBadge="11" tabBadgeStyle="secondary"></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 tabbarLayout="icon-bottom" no-navbar>
|
|
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
|
|
<ion-tab tabTitle="Favorites" tabIcon="heart" tabBadge="577" tabBadgeStyle="dark"></ion-tab>
|
|
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
|
|
<!-- Icons right of text -->
|
|
<ion-tabs tabbarLayout="icon-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" tabBadgeStyle="light"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
<!-- Icons left of text -->
|
|
<ion-tabs tabbarLayout="icon-left" no-navbar>
|
|
<ion-tab tabTitle="Recents" tabIcon="call" tabBadge="32" tabBadgeStyle="danger"></ion-tab>
|
|
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
|
|
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
<!-- Dynamic Badge -->
|
|
<ion-tabs tabbarLayout="icon-left" 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]="myBadge" tabBadgeStyle="primary"></ion-tab>
|
|
</ion-tabs>
|