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

feat(tabs): add tabBadgeStyle which allows you to pass in a color for the badge to be

Browse Source 
Closes #5007
This commit is contained in:
Brandy Carney
2016-01-23 12:41:54 -05:00
parent 16f9931957
commit 21ae736b9a
3 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ionic/components/tabs/tab.ts
View File

@ -79,6 +79,8 @@ import {TabButton} from './tab-button';
* @property {any} [root] - set the root page for this tab * @property {any} [root] - set the root page for this tab
* @property {any} [tabTitle] - set the title of this tab * @property {any} [tabTitle] - set the title of this tab
* @property {any} [tabIcon] - set the icon for this tab * @property {any} [tabIcon] - set the icon for this tab
* @property {any} [tabBadge] - set the badge for this tab
* @property {any} [tabBadgeStyle] - set the badge color for this tab
* @property {any} [select] - method to call when the current tab is selected * @property {any} [select] - method to call when the current tab is selected
* *
*/ */
@ -104,6 +106,7 @@ export class Tab extends NavController {
@Input() tabTitle: string; @Input() tabTitle: string;
@Input() tabIcon: string; @Input() tabIcon: string;
@Input() tabBadge: string; @Input() tabBadge: string;
@Input() tabBadgeStyle: string;
@Output() select: EventEmitter<any> = new EventEmitter(); @Output() select: EventEmitter<any> = new EventEmitter();
constructor( constructor(
@ -130,6 +133,8 @@ export class Tab extends NavController {
* @private * @private
*/ */
ngOnInit() { ngOnInit() {
this.tabBadgeStyle = this.tabBadgeStyle ? this.tabBadgeStyle : 'default';
if (this._isInitial) { if (this._isInitial) {
this.parent.select(this); this.parent.select(this);

2
ionic/components/tabs/tabs.ts
View File

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

10
ionic/components/tabs/test/badges/main.html
View File

@ -11,13 +11,13 @@
<ion-tabs no-navbar> <ion-tabs no-navbar>
<ion-tab tabIcon="call"></ion-tab> <ion-tab tabIcon="call"></ion-tab>
<ion-tab tabIcon="heart"></ion-tab> <ion-tab tabIcon="heart"></ion-tab>
<ion-tab tabIcon="settings" tabBadge="all"></ion-tab> <ion-tab tabIcon="settings" tabBadge="all" tabBadgeStyle="primary"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons on top of text --> <!-- Icons on top of text -->
<ion-tabs no-navbar> <ion-tabs no-navbar>
<ion-tab tabTitle="Location" tabIcon="navigate" tabBadge="11"></ion-tab> <ion-tab tabTitle="Location" tabIcon="navigate" tabBadge="11" tabBadgeStyle="secondary"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="star"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes"></ion-tab> <ion-tab tabTitle="Radio" tabIcon="musical-notes"></ion-tab>
</ion-tabs> </ion-tabs>
@ -26,7 +26,7 @@
<!-- Icons below text --> <!-- Icons below text -->
<ion-tabs tabbarIcons="bottom" no-navbar> <ion-tabs tabbarIcons="bottom" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" tabBadge="577"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" tabBadge="577" tabBadgeStyle="dark"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
</ion-tabs> </ion-tabs>
@ -35,12 +35,12 @@
<ion-tabs tabbarIcons="right" no-navbar> <ion-tabs tabbarIcons="right" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" tabBadge="1030"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings" tabBadge="1030" tabBadgeStyle="light"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons left of text --> <!-- Icons left of text -->
<ion-tabs tabbarIcons="left" no-navbar> <ion-tabs tabbarIcons="left" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call" tabBadge="32"></ion-tab> <ion-tab tabTitle="Recents" tabIcon="call" tabBadge="32" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab> <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
</ion-tabs> </ion-tabs>