feat(tab-select): add stretchTabs input to stretch tabs on mat-tab-gr…

…oup (Teradata#1191) * feat(tab-select): add stretchTabs input to stretch tabs on mat-tab-group * docs(): add doc comments to input
kriswinbush · Jul 11, 2018 · e737af1 · e737af1
1 parent e1afbd7
commit e737af1
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/src/platform/experimental/tab-select/README.md b/src/platform/experimental/tab-select/README.md
@@ -12,6 +12,8 @@
   + Sets disabled state of the component.
 + disabledRipple?: boolean
   + Disables ripple effect on component.
++ stretchTabs?: boolean
+  + Makes the tabs stretch to fit the parent container.
 + color?: ThemePalette
   + Color of the tab group.
 + backgroundColor?: ThemePalette
@@ -82,6 +84,7 @@ Example with all inputs/outputs:
                 [color]="'accent'"
                 [disabled]="false"
                 [disabledRipple]="false"
+                [stretchTabs]="true"
                 (valueChange)="myValue = $event">
   <td-tab-option [value]="1" [disabled]="false">Label 1</td-tab-option>
   <td-tab-option [value]="2">Label 2</td-tab-option>

diff --git a/src/platform/experimental/tab-select/tab-select.component.html b/src/platform/experimental/tab-select/tab-select.component.html
@@ -1,4 +1,5 @@
-<mat-tab-group [backgroundColor]="backgroundColor"
+<mat-tab-group [attr.mat-stretch-tabs]="stretchTabs ? true : undefined"
+                [backgroundColor]="backgroundColor"
                 [color]="color"
                 [disableRipple]="disableRipple"
                 [selectedIndex]="selectedIndex"

diff --git a/src/platform/experimental/tab-select/tab-select.component.ts b/src/platform/experimental/tab-select/tab-select.component.ts
@@ -17,6 +17,7 @@ import {
 } from '@angular/forms';
 
 import { ThemePalette } from '@angular/material/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 import { ICanDisable,
           mixinDisabled,
@@ -57,6 +58,7 @@ export class TdTabSelectComponent extends _TdTabSelectMixinBase
 
   private _values: any[] = [];
   private _selectedIndex: number = 0;
+  private _stretchTabs: boolean = false;
 
   get selectedIndex(): number {
     return this._selectedIndex;
@@ -71,6 +73,17 @@ export class TdTabSelectComponent extends _TdTabSelectMixinBase
     return this._tabOptions ? this._tabOptions.toArray() : undefined;
   }
 
+  /**
+   * Makes the tabs stretch to fit the parent container.
+   */
+  @Input('stretchTabs')
+  set stretchTabs(stretchTabs: boolean) {
+    this._stretchTabs = coerceBooleanProperty(stretchTabs);
+  }
+  get stretchTabs(): boolean {
+    return this._stretchTabs;
+  }
+
   /**
    * Color of the tab group.
    */

diff --git a/src/test-bed/test-bed/test-bed.component.html b/src/test-bed/test-bed/test-bed.component.html
@@ -55,8 +55,8 @@ <h3>Disabled tabs</h3>
     </td-tab-option>
   </td-tab-select>
 
-  <h3>Disabled ripple on tabs</h3>
-  <td-tab-select disableRipple>
+  <h3>Stretched and disabled ripple on tabs</h3>
+  <td-tab-select stretchTabs disableRipple>
     <td-tab-option>
       MY LABEL
     </td-tab-option>