javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(tabs): update tabs demo to include colors and badges

Browse Source 
references driftyco/ionic-site#453
This commit is contained in:
Brandy Carney
2016-02-29 18:43:43 -05:00
parent b93bc0c1bd
commit cd723898b7
2 changed files with 14 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
demos/tabs/main.html
View File

@ -6,46 +6,46 @@
<!-- Text --> <!-- Text -->
<ion-tabs no-navbar> <ion-tabs no-navbar>
<ion-tab tabTitle="Recents" [root]="root"></ion-tab> <ion-tab tabTitle="Recents" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" [root]="root"></ion-tab> <ion-tab tabTitle="Favorites" [root]="root" tabBadge="23"></ion-tab>
<ion-tab tabTitle="Settings" [root]="root"></ion-tab> <ion-tab tabTitle="Settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons --> <!-- Icons -->
<ion-tabs no-navbar selectedIndex="1"> <ion-tabs no-navbar selectedIndex="1" primary>
<ion-tab tabIcon="call" [root]="root"></ion-tab> <ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart" [root]="root"></ion-tab> <ion-tab tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabIcon="settings" [root]="root"></ion-tab> <ion-tab tabIcon="settings" [root]="root" tabBadge="2" tabBadgeStyle="danger"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons on top of text --> <!-- Icons on top of text -->
<ion-tabs no-navbar selectedIndex="2"> <ion-tabs no-navbar selectedIndex="2" secondary>
<ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab> <ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="root"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="star" [root]="root" tabBadge="12" tabBadgeStyle="dark"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab> <ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons below text --> <!-- Icons below text -->
<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1"> <ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1" danger>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="47" tabBadgeStyle="light"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons right of text --> <!-- Icons right of text -->
<ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0"> <ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0" light>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons left of text --> <!-- Icons left of text -->
<ion-tabs tabbarLayout="icon-left" no-navbar> <ion-tabs tabbarLayout="icon-left" no-navbar dark>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
@ -54,30 +54,15 @@
<!-- No icons --> <!-- No icons -->
<ion-tabs tabbarLayout="icon-hide" no-navbar> <ion-tabs tabbarLayout="icon-hide" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="61" tabBadgeStyle="dark"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- No overflow text --> <!-- No overflow text -->
<ion-tabs no-navbar> <ion-tabs no-navbar primary>
<ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab> <ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab> <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab> <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- primary color tabbar -->
<ion-tabs no-navbar primary>
<ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- primary color tabbar with a badge -->
<ion-tabs no-navbar primary>
<ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart" [root]="root" tabBadge="23" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
</ion-content> </ion-content>

1
ionic/components/tabs/tabs.scss
View File

@ -159,6 +159,7 @@ tab-highlight {
right: calc(50% - 30px); right: calc(50% - 30px);
} }
[tabbarLayout=icon-hide] .tab-badge,
[tabbarLayout=icon-bottom] .tab-badge, [tabbarLayout=icon-bottom] .tab-badge,
[tabbarLayout=icon-left] .tab-badge, [tabbarLayout=icon-left] .tab-badge,
[tabbarLayout=icon-right] .tab-badge { [tabbarLayout=icon-right] .tab-badge {