feat(tabs): enabled and show inputs

Closes #5768
ionic-team · Apr 15, 2016 · 1b085e3 · 1b085e3
1 parent f972908
commit 1b085e3
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 7 deletions.
diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts
@@ -3,6 +3,7 @@ import {EventEmitter, Input, Output} from 'angular2/core';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
+import {isTrueProperty} from '../../util/util';
 import {Keyboard} from '../../util/keyboard';
 import {NavController, NavOptions} from '../nav/nav-controller';
 import {ViewController} from '../nav/view-controller';
@@ -133,6 +134,8 @@ export class Tab extends NavController {
    */
   public isSelected: boolean;
   private _isInitial: boolean;
+  private _isEnabled: boolean = true;
+  private _isShown: boolean = true;
   private _panelId: string;
   private _btnId: string;
   private _loaded: boolean;
@@ -144,35 +147,61 @@ export class Tab extends NavController {
   btn: TabButton;
 
   /**
-   * @input {Page} Set the root page for this tab
+   * @input {Page} Set the root page for this tab.
    */
   @Input() root: Type;
 
   /**
-   * @input {object} Any nav-params you want to pass to the root page of the tab
+   * @input {object} Any nav-params to pass to the root page of this tab.
    */
   @Input() rootParams: any;
 
   /**
-   * @input {string} Set the title of this tab
+   * @input {string} The title of the tab button.
    */
   @Input() tabTitle: string;
 
   /**
-   * @input {string} Set the icon for this tab
+   * @input {string} The icon for the tab button.
    */
   @Input() tabIcon: string;
 
   /**
-   * @input {string} Set the badge for this tab
+   * @input {string} The badge for the tab button.
    */
   @Input() tabBadge: string;
 
   /**
-   * @input {string} Set the badge color for this tab
+   * @input {string} The badge color for the tab button.
    */
   @Input() tabBadgeStyle: string;
 
+  /**
+   * @input {boolean} If the tab is enabled or not. If the tab
+   * is not enabled then the tab button will still show, however,
+   * the button will appear grayed out and will not be clickable.
+   * Defaults to `true`.
+   */
+  @Input()
+  get enabled(): boolean {
+    return this._isEnabled;
+  }
+  set enabled(val: boolean) {
+    this._isEnabled = isTrueProperty(val);
+  }
+
+  /**
+   * @input {boolean} If the tab button is visible within the
+   * tabbar or not. Defaults to `true`.
+   */
+  @Input()
+  get show(): boolean {
+    return this._isShown;
+  }
+  set show(val: boolean) {
+    this._isShown = isTrueProperty(val);
+  }
+
   /**
    * @output {Tab} Method to call when the current tab is selected
    */

diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
@@ -84,6 +84,20 @@ tabbar {
   cursor: pointer;
 }
 
+.tab-disabled {
+  pointer-events: none;
+
+  ion-badge,
+  ion-icon,
+  span {
+    opacity: 0.4;
+  }
+}
+
+.tab-hidden {
+  display: none;
+}
+
 .tab-button-text {
   margin-top: 3px;
   margin-bottom: 2px;

diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
@@ -140,7 +140,7 @@ import {isBlank, isTrueProperty} from '../../util/util';
     '</ion-navbar-section>' +
     '<ion-tabbar-section>' +
       '<tabbar role="tablist">' +
-        '<a *ngFor="#t of _tabs" [tab]="t" class="tab-button" role="tab">' +
+        '<a *ngFor="#t of _tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab">' +
           '<ion-icon *ngIf="t.tabIcon" [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' +
           '<span *ngIf="t.tabTitle" class="tab-button-text">{{t.tabTitle}}</span>' +
           '<ion-badge *ngIf="t.tabBadge" class="tab-badge" [ngClass]="\'badge-\' + t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>' +