feat(tabs): add disabled property (#1141)

Closes #387

src/app/playground-components.ts

@@ -1013,6 +1013,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
  component: 'TabsetWidthComponent',
  name: 'Tabset Width',
  },
+ {
+ path: 'tabset-disabled.component',
+ link: '/tabset/tabset-disabled.component',
+ component: 'TabsetDisabledComponent',
+ name: 'Tabset Disabled',
+ },
  ],
  },
  {

src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss

@@ -22,7 +22,7 @@
  .route-tab {
  background: nb-theme(route-tabs-header-bg);
  min-width: nb-theme(route-tabs-header-min-width);
-
+ cursor: pointer;
  a {
  padding: nb-theme(route-tabs-padding);
  color: nb-theme(route-tabs-fg);
@@ -57,6 +57,20 @@
  }
  }
  }
+
+
+ &.disabled {
+ pointer-events: none;
+ cursor: default;
+ a {
+ color: nb-theme(route-tabs-fg-disabled);
+ cursor: default;
+ pointer-events: none;
+ &:hover {
+ color: nb-theme(route-tabs-fg-disabled);
+ }
+ }
+ }
  }
  }
  }

src/framework/theme/components/route-tabset/route-tabset.component.scss

@@ -13,7 +13,6 @@
  margin: 0;
 
  .route-tab {
- cursor: pointer;
  margin-bottom: -1px;
  text-align: center;
 

src/framework/theme/components/route-tabset/route-tabset.component.ts

@@ -70,8 +70,10 @@ import { convertToBoolProperty } from '../helpers';
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
  [class.responsive]="tab.responsive"
+ [class.disabled]="tab.disabled"
+ [attr.tabindex]="tab.disabled ? -1 : 0"
  class="route-tab">
- <a href>
+ <a href (click)="$event.preventDefault()" tabindex="-1">
  <i *ngIf="tab.icon" [class]="tab.icon"></i>
  <span *ngIf="tab.title">{{ tab.title }}</span>
  </a>
@@ -86,7 +88,7 @@ export class NbRouteTabsetComponent {
 
  /**
  * Tabs configuration
- * @param Object{route: string, title: string, tag?: string}
+ * @param Object{route: string, title: string, tag?: string, responsive?: boolean, disabled?: boolean}
  */
  @Input() tabs: any[];
 
@@ -109,8 +111,9 @@ export class NbRouteTabsetComponent {
  }
 
  selectTab(tab: any) {
- this.changeTab.emit(tab);
-
- this.router.navigate([tab.route]);
+ if (!tab.disabled) {
+ this.changeTab.emit(tab);
+ this.router.navigate([tab.route]);
+ }
  }
 }

src/framework/theme/components/tabset/_tabset.component.theme.scss

@@ -22,6 +22,7 @@
 
  .tab {
  background: nb-theme(tabs-header-bg);
+ cursor: pointer;
 
  a {
  padding: nb-theme(tabs-padding);
@@ -59,6 +60,19 @@
  }
  }
  }
+
+ &.disabled {
+ cursor: default;
+ pointer-events: none;
+ a {
+ color: nb-theme(tabs-fg-disabled);
+ cursor: default;
+ pointer-events: none;
+ &:hover {
+ color: nb-theme(tabs-fg-disabled);
+ }
+ }
+ }
  }
  }
 

src/framework/theme/components/tabset/tabset.component.scss

@@ -31,7 +31,6 @@
  margin: 0;
 
  .tab {
- cursor: pointer;
  margin-bottom: -1px;
  text-align: center;
  position: relative;

src/framework/theme/components/tabset/tabset.component.ts

@@ -53,6 +53,19 @@ export class NbTabComponent {
  */
  @Input() tabIcon: string;
 
+ /**
+ * Item is disabled and cannot be opened.
+ * @type {boolean}
+ */
+ @Input('disabled')
+ @HostBinding('class.disabled')
+ get disabled(): boolean {
+ return this.disabledValue;
+ }
+ set disabled(val: boolean) {
+ this.disabledValue = convertToBoolProperty(val);
+ }
+
  /**
  * Show only icons when width is smaller than `tabs-icon-only-max-width`
  * @type {boolean}
@@ -72,6 +85,7 @@ export class NbTabComponent {
  activeValue: boolean = false;
 
  responsiveValue: boolean = false;
+ disabledValue = false;
 
  /**
  * Specifies active tab
@@ -172,6 +186,9 @@ export class NbTabComponent {
  *
  * @stacked-example(Icon, tabset/tabset-icon.component)
  *
+ * It is also possible to disable a tab using `disabled` property:
+ * @stacked-example(Disabled Tab, tabset/tabset-disabled.component)
+ *
  * @styles
  *
  * tabs-font-family:
@@ -201,8 +218,10 @@ export class NbTabComponent {
  (click)="selectTab(tab)"
  [class.responsive]="tab.responsive"
  [class.active]="tab.active"
+ [class.disabled]="tab.disabled"
+ [attr.tabindex]="tab.disabled ? -1 : 0"
  class="tab">
- <a href (click)="$event.preventDefault()">
+ <a href (click)="$event.preventDefault()" tabindex="-1">
  <i *ngIf="tab.tabIcon" [class]="tab.tabIcon"></i>
  <span *ngIf="tab.tabTitle">{{ tab.tabTitle }}</span>
  </a>
@@ -266,7 +285,9 @@ export class NbTabsetComponent implements AfterContentInit {
 
  // TODO: navigate to routeParam
  selectTab(selectedTab: NbTabComponent) {
- this.tabs.forEach(tab => tab.active = tab === selectedTab);
- this.changeTab.emit(selectedTab);
+ if (!selectedTab.disabled) {
+ this.tabs.forEach(tab => tab.active = tab === selectedTab);
+ this.changeTab.emit(selectedTab);
+ }
  }
 }

src/framework/theme/styles/themes/_default.scss

@@ -206,6 +206,7 @@ $theme: (
  tabs-header-bg: transparent,
  tabs-separator: separator,
  tabs-fg: color-fg,
+ tabs-fg-disabled: tabs-fg,
  tabs-fg-text: color-fg-text,
  tabs-fg-heading: color-fg-heading,
  tabs-bg: transparent,
@@ -222,6 +223,7 @@ $theme: (
  route-tabs-header-bg: transparent,
  route-tabs-separator: separator,
  route-tabs-fg: color-fg,
+ route-tabs-fg-disabled: route-tabs-fg,
  route-tabs-fg-heading: color-fg-heading,
  route-tabs-bg: transparent,
  route-tabs-selected: color-success,

src/playground/with-layout/tabset/route-tabset-showcase.component.ts

@@ -35,5 +35,11 @@ export class RouteTabsetShowcaseComponent {
  responsive: true,
  route: '/tabset/route-tabset-showcase.component/tab2',
  },
+ {
+ title: 'Transaction',
+ icon: 'nb-notifications',
+ responsive: true,
+ disabled: true,
+ },
  ];
 }

src/playground/with-layout/tabset/tabset-disabled.component.html

@@ -0,0 +1,16 @@
+<nb-card>
+ <nb-card-body>
+
+ <nb-tabset>
+ <nb-tab tabTitle="Users">
+ <p>List of <strong>users</strong>.</p>
+ </nb-tab>
+ <nb-tab tabTitle="Orders">
+ <p>List of <strong>orders</strong>.</p>
+ </nb-tab>
+ <nb-tab tabTitle="Disabled Tab" disabled>
+ </nb-tab>
+ </nb-tabset>
+
+ </nb-card-body>
+</nb-card>

src/playground/with-layout/tabset/tabset-disabled.component.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+ selector: 'nb-tabset-disabled',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: './tabset-disabled.component.html',
+ styles: [`
+ :host nb-tab {
+ padding: 1.25rem;
+ }
+ `],
+})
+export class TabsetDisabledComponent {
+}

src/playground/with-layout/tabset/tabset-routing.module.ts

@@ -16,6 +16,7 @@ import { TabsetIconComponent } from './tabset-icon.component';
 import { TabsetShowcaseComponent } from './tabset-showcase.component';
 import { TabsetTestComponent } from './tabset-test.component';
 import { TabsetWidthComponent } from './tabset-width.component';
+import { TabsetDisabledComponent } from './tabset-disabled.component';
 
 const routes: Route[] = [
  {
@@ -61,6 +62,10 @@ const routes: Route[] = [
  path: 'tabset-width.component',
  component: TabsetWidthComponent,
  },
+ {
+ path: 'tabset-disabled.component',
+ component: TabsetDisabledComponent,
+ },
 ];
 
 @NgModule({

src/playground/with-layout/tabset/tabset-showcase.component.html

@@ -8,7 +8,7 @@
  <nb-tab tabTitle="Orders">
  <p>List of <strong>orders</strong>.</p>
  </nb-tab>
- <nb-tab tabTitle="Transactions">
+ <nb-tab tabTitle="Transactions" disabled>
  <p>List of <strong>transactions</strong>.</p>
  </nb-tab>
  </nb-tabset>

src/playground/with-layout/tabset/tabset.module.ts

@@ -17,6 +17,7 @@ import {
  RouteTabsetShowcaseChild1Component,
  RouteTabsetShowcaseChild2Component,
 } from './components/route-tabset-children.component';
+import { TabsetDisabledComponent } from './tabset-disabled.component';
 
 @NgModule({
  declarations: [
@@ -28,6 +29,7 @@ import {
  TabsetWidthComponent,
  RouteTabsetShowcaseChild1Component,
  RouteTabsetShowcaseChild2Component,
+ TabsetDisabledComponent,
  ],
  imports: [
  NbTabsetModule,