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

fix(tabs): don't add the has-icon class to a tab button if the layout is icon-hide

Browse Source 
fixes #5658
This commit is contained in:
Brandy Carney
2016-03-04 15:46:36 -05:00
parent 7ee0b528b0
commit 6b93bc10fd
4 changed files with 22 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/tabs/tab-button.ts
View File

@@ -29,6 +29,7 @@ export class TabButton extends Ion {
private hasTitleOnly: boolean;
private hasIconOnly: boolean;
private hasBadge: boolean;
private _layout: string;
@Input() tab: Tab;
@Output() select: EventEmitter<Tab> = new EventEmitter();
@@ -36,12 +37,15 @@ export class TabButton extends Ion {
constructor(config: Config, elementRef: ElementRef) {
super(elementRef);
this.disHover = (config.get('hoverCSS') === false);
this._layout = config.get('tabbarLayout');
}
ngOnInit() {
this.tab.btn = this;
this._layout = this.tab.parent.tabbarLayout || this._layout;
this.hasTitle = !!this.tab.tabTitle;
this.hasIcon = !!this.tab.tabIcon;
this.hasIcon = !!this.tab.tabIcon && this._layout != 'icon-hide';
this.hasTitleOnly = (this.hasTitle && !this.hasIcon);
this.hasIconOnly = (this.hasIcon && !this.hasTitle);
this.hasBadge = !!this.tab.tabBadge;

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

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

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

@@ -32,7 +32,7 @@
<!-- Icons right of text -->
<ion-tabs tabbarLayout="icon-right" no-navbar>
<ion-tabs tabbarLayout="icon-right" primary 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>
@@ -45,6 +45,21 @@
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
</ion-tabs>
<!-- No icons -->
<ion-tabs no-navbar tabbarLayout="icon-hide">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="4"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- No title -->
<ion-tabs tabbarLayout="title-hide" secondary no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="7" tabBadgeStyle="light"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- Dynamic Badge -->
<ion-tabs tabbarLayout="icon-left" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>

2
ionic/components/tabs/test/tab-bar-scenarios/main.html
View File

@@ -56,7 +56,7 @@
<!-- No title -->
<ion-tabs tabbarLayout="title-hide" no-navbar secondary>
<ion-tabs tabbarLayout="title-hide" secondary no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>