Tab component

.vscode/settings.json

@@ -26,13 +26,6 @@
     "**/inline-template": true
   },
 
-// Relative Path extension
-
-  // Excludes the extension from the relative path url (Useful for systemjs imports).
-  "relativePath.removeExtension": true,
-
 // Vscode-Icon extension
-
-  // Enable Angular icons
-  "vsicons.presets.angular": true
+  "typescript.tsdk": "node_modules\\typescript\\lib"
 }

README.md

@@ -182,6 +182,7 @@ export class HomeModule { }
 * Sidenav
 * Spinner
 * Switch
+* Tab
 * Textarea
 * Toast
 * Tooltip

demo-app/src/app/app.module.ts

@@ -33,6 +33,7 @@ import { SelectModule } from './select/select.module';
 import { SidenavModule } from './sidenav/sidenav.module';
 import { SpinnerModule } from './spinner/spinner.module';
 import { SwitchModule } from './switch/switch.module';
+import { TabModule } from './tab/tab.module';
 import { TextareaModule } from './textarea/textarea.module';
 import { ToastModule } from './toast/toast.module';
 import { TooltipModule } from './tooltip/tooltip.module';
@@ -74,6 +75,7 @@ import { ValidationModule } from './validation/validation.module';
     SidenavModule,
     SpinnerModule,
     SwitchModule,
+    TabModule,
     TextareaModule,
     ToastModule,
     TooltipModule,

demo-app/src/app/app.routing.ts

@@ -24,6 +24,7 @@ import { SelectComponent } from './select/select.component';
 import { SidenavComponent } from './sidenav/sidenav.component';
 import { SpinnerComponent } from './spinner/spinner.component';
 import { SwitchComponent } from './switch/switch.component';
+import { TabComponent } from './tab/tab.component';
 import { TextareaComponent } from './textarea/textarea.component';
 import { ToastComponent } from './toast/toast.component';
 import { TooltipComponent } from './tooltip/tooltip.component';
@@ -65,6 +66,7 @@ export const ROUTES: Routes = [
   { path: 'navbar', component: NavbarComponent, data: { icon: 'view-day', text: 'Navbar', section: layout } },
   { path: 'parallax', component: ParallaxComponent, data: { icon: 'image-area', text: 'Parallax', section: layout } },
   { path: 'sidenav', component: SidenavComponent, data: { icon: 'menu', text: 'Sidenav', section: layout } },
+  { path: 'tab', component: TabComponent, data: { icon: 'tab', text: 'Tab', section: layout } },
 
   // components routes - Loading
   { path: 'progress', component: ProgressComponent, data: { icon: 'timer-sand', text: 'Progress', section: loading } },

demo-app/src/app/tab/tab.component.html

@@ -0,0 +1,150 @@
+<h3>Tab</h3>
+
+<div class="section">
+  <h5 class="light">Basic tab</h5>
+
+  <div class="row m-valign-wrapper">
+    <div class="col s12 m6">
+      <mz-tab>
+        <mz-tab-item [class]="'col s12'" [label]="'Tab 1'">Tab 1</mz-tab-item>
+        <mz-tab-item [class]="'col s12'" [label]="'Tab 2'">Tab 2</mz-tab-item>
+        <mz-tab-item [class]="'col s12'" [label]="'Tab 3'">Tab 3</mz-tab-item>
+      </mz-tab>
+    </div>
+
+    <p class="col s12 m6">
+      Default behavior from tab has variable tab width.
+    </p>
+  </div>
+</div>
+
+<div class="section">
+  <h5 class="light">Active/disable tab item</h5>
+
+  <div class="row m-valign-wrapper">
+    <div class="col s12 m6">
+      <mz-tab>
+        <mz-tab-item [class]="'col s12'" [label]="'Tab 4'">Tab 4</mz-tab-item>
+        <mz-tab-item [active]="'true'" [class]="'col s12'" [label]="'Tab 5'">Tab 5</mz-tab-item>
+        <mz-tab-item [class]="'col s12'" [disabled]="'true'" [label]="'Tab 6'">Tab 6</mz-tab-item>
+      </mz-tab>
+    </div>
+
+    <p class="col s12 m6">
+      Basic tab with Tab 5 <code class="language-markup">active</code> property to <i>true</i> and
+      Tab 6 <code class="language-markup">disabled</code> property to <i>true</i>.
+    </p>
+  </div>
+</div>
+
+<div class="section">
+  <h5 class="light">Fixed tab item</h5>
+
+  <div class="row m-valign-wrapper">
+    <div class="col s12 m6">
+      <mz-tab [fixedTabWidth]="'true'">
+        <mz-tab-item [class]="'col s12'" [label]="'Tab 7'">Tab 7</mz-tab-item>
+        <mz-tab-item [class]="'col s12'" [label]="'Tab 8'">Tab 8</mz-tab-item>
+        <mz-tab-item [class]="'col s12'" [label]="'Tab 9'">Tab 9</mz-tab-item>
+      </mz-tab>
+    </div>
+
+    <p class="col s12 m6">
+      Tab with <code class="language-markup">fixedTabWidth</code> property to <i>true</i>.
+    </p>
+  </div>
+</div>
+
+<div class="section">
+  <h5 class="light">Scrollable tab item</h5>
+
+  <div class="row m-valign-wrapper">
+    <div class="col s12 m6">
+      <mz-tab [fixedTabWidth]="'true'">
+        <mz-tab-item [class]="'col s12'" [label]="'Scrollable Tab 1'">Scrollable Tab 1</mz-tab-item>
+        <mz-tab-item [class]="'col s12'" [label]="'Scrollable Tab 2'">Scrollable Tab 2</mz-tab-item>
+        <mz-tab-item [class]="'col s12'" [label]="'Scrollable Tab 3'">Scrollable Tab 3</mz-tab-item>
+        <mz-tab-item [class]="'col s12'" [label]="'Scrollable Tab 4'">Scrollable Tab 4</mz-tab-item>
+        <mz-tab-item [class]="'col s12'" [label]="'Scrollable Tab 5'">Scrollable Tab 5</mz-tab-item>
+        <mz-tab-item [class]="'col s12'" [label]="'Scrollable Tab 6'">Scrollable Tab 6</mz-tab-item>
+      </mz-tab>
+    </div>
+
+    <p class="col s12 m6">
+      Tab become scrollable when there a lot of tab item.
+    </p>
+  </div>
+</div>
+
+<div class="section">
+  <h5 class="light">Swipeable item</h5>
+
+  <div class="row m-valign-wrapper">
+    <div class="col s12 m6">
+      <mz-tab
+        [swipeable]="'true'"
+      >
+        <mz-tab-item [class]="'blue col s12'" [label]="'Tab 10'">Tab 10</mz-tab-item>
+        <mz-tab-item [class]="'red col s12'" [label]="'Tab 11'">Tab 11</mz-tab-item>
+        <mz-tab-item [class]="'green col s12'" [label]="'Tab 12'">Tab 12</mz-tab-item>
+      </mz-tab>
+    </div>
+
+    <p class="col s12 m6">
+      Swipeable tabs which can be used on touch enabled devices.
+    </p>
+  </div>
+</div>
+
+<div class="section">
+
+  <h5 class="light">HTML Structure</h5>
+
+  <app-code-snippet>
+&lt;mz-tab
+  [fixedTabWidth]="'true'"
+  [onShow]="callbackFunction()"
+  [responsiveThreshold]="'true'"
+  [swipeable]="'true'"
+>
+  &lt;mz-tab-item
+    [active]="'true'"
+    [disabled]="'true'"
+    [label]="'Tab 1'"
+  >
+    Tab 1
+  &lt;/mz-tab-item>
+  &lt;mz-tab-item [label]="'Tab 2'">Tab 2&lt;/mz-tab-item>
+  &lt;mz-tab-item [label]="'Tab 3'">Tab 3&lt;/mz-tab-item>
+&lt;/mz-tab>
+  </app-code-snippet>
+</div>
+
+<div class="section">
+
+  <h5 class="light">Properties</h5>
+
+  <div class="section">
+    <h6 class="bold">mz-tab</h6>
+
+    <p>
+      Tab can be customized using the following properties on the <code class="language-markup">mz-tab</code> element.
+    </p>
+
+    <app-properties-table
+      [properties]="tabProperties">
+    </app-properties-table>
+  </div>
+
+  <div class="section">
+    <h6 class="bold">mz-tab-item</h6>
+
+    <p>
+      <code class="language-markup">mz-tab-item</code> will transclude any contents.
+    </p>
+
+    <app-properties-table
+      [properties]="tabItemProperties">
+    </app-properties-table>
+  </div>
+</div>

demo-app/src/app/tab/tab.component.scss

@@ -0,0 +1,3 @@
+.tab-content {
+  padding: 5px;
+}

demo-app/src/app/tab/tab.component.ts

@@ -0,0 +1,77 @@
+import { Component } from '@angular/core';
+import { IPropertyRow } from './../shared/properties-table/properties-table.component';
+
+@Component({
+  selector: 'app-tab',
+  templateUrl: './tab.component.html',
+  styleUrls: ['./tab.component.scss'],
+})
+export class TabComponent {
+  tabItemProperties: IPropertyRow[] = [
+    {
+      name: 'active',
+      mandatory: false,
+      type: 'boolean',
+      description: `When enabled each tab item will have the same width`,
+      defaultValue: `false`,
+    },
+    {
+      name: 'class',
+      mandatory: false,
+      type: 'string',
+      description: `CSS class to be applied on the tab item`,
+      defaultValue: `false`,
+    },
+    {
+      name: 'disabled',
+      mandatory: false,
+      type: 'boolean',
+      description: `When enabled each tab item will have the same width`,
+      defaultValue: `false`,
+    },
+    {
+      name: 'href',
+      mandatory: false,
+      type: 'string',
+      description: `URL to link to an external page`,
+    },
+    {
+      name: 'target',
+      mandatory: false,
+      type: 'string',
+      description: `Force a tab to behave as a regular hyperlink. The value could be <code class="language-markup">_blank</code>`
+                    + `(open a new window) and <code class="language-markup">_self</code> (open in same window).`,
+    },
+  ];
+
+  tabProperties: IPropertyRow[] = [
+    {
+      name: 'fixedTabWidth',
+      mandatory: false,
+      type: 'boolean',
+      description: `When enabled each tab item will have the same width`,
+      defaultValue: `false`,
+    },
+    {
+      name: 'onShow',
+      mandatory: false,
+      type: 'Function',
+      description: `Function that will be called when the tab is changed. The callback provides a parameter which refers to the current`
+                    + `tab being shown.`,
+    },
+    {
+      name: 'responsiveThreshold',
+      mandatory: false,
+      type: 'number',
+      description: `	The maximum width of the screen, in pixels, where the swipeable functionality initializes`,
+      defaultValue: `Infinity`,
+    },
+    {
+      name: 'swipeable',
+      mandatory: false,
+      type: 'boolean',
+      description: `Function that will be called when a collapsible section is opened`,
+      defaultValue: `false`,
+    },
+  ];
+}

demo-app/src/app/tab/tab.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MaterializeModule } from 'ng2-materialize';
+
+import { CodeSnippetModule } from '../shared/code-snippet/code-snippet.module';
+import { PropertiesTableModule } from '../shared/properties-table/properties-table.module';
+import { TabComponent } from './tab.component';
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+    CodeSnippetModule,
+    CommonModule,
+    MaterializeModule,
+    PropertiesTableModule,
+  ],
+  declarations: [TabComponent],
+})
+export class TabModule { }

src/app/index.ts

@@ -17,6 +17,7 @@ export * from './select';
 export * from './sidenav';
 export * from './spinner';
 export * from './switch';
+export * from './tab';
 export * from './textarea';
 export * from './toast';
 export * from './validation';

src/app/materialize.module.ts

@@ -24,6 +24,7 @@ import * as Shared from './shared';
 import * as Sidenav from './sidenav';
 import * as Spinner from './spinner';
 import * as Switch from './switch';
+import * as Tab from './tab';
 import * as Textarea from './textarea';
 import * as Toast from './toast';
 import * as Tooltip from './tooltip';
@@ -83,6 +84,8 @@ const MZ_COMPONENTS = [
   Spinner.MzSpinnerComponent,
   Switch.MzSwitchContainerComponent,
   Switch.MzSwitchDirective,
+  Tab.MzTabComponent,
+  Tab.MzTabItemComponent,
   Textarea.MzTextareaDirective,
   Textarea.MzTextareaPrefixDirective,
   Textarea.MzTextareaContainerComponent,

src/app/tab/index.ts

@@ -0,0 +1,2 @@
+export * from './tab-item/tab-item.component';
+export * from './tab.component';

src/app/tab/tab-item/tab-item.component.html

@@ -0,0 +1,3 @@
+<div id="{{ link }}" class="{{ class }}">
+  <ng-content></ng-content>
+</div>

src/app/tab/tab-item/tab-item.component.ts

@@ -0,0 +1,29 @@
+import {
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  Renderer,
+  ViewChildren,
+} from '@angular/core';
+
+@Component({
+  selector: 'mz-tab-item',
+  templateUrl: './tab-item.component.html',
+  styleUrls: ['./tab-item.component.scss'],
+})
+export class MzTabItemComponent {
+  @Input() active: boolean;
+  @Input() class: string;
+  @Input() disabled: boolean;
+  @Input() href: string;
+  @Input() label;
+  @Input() target: string;
+
+  tabs: HTMLElement;
+  liElement: HTMLElement;
+
+  get link(): string {
+    return this.label.replace(/\s+/g, '-').toLowerCase();
+  }
+}

src/app/tab/tab.component.html

@@ -0,0 +1,13 @@
+<ul #tabs
+  class="tabs"
+  [class.tabs-fixed-width]="fixedTabWidth">
+  <li class="tab" [class.disabled]="tabItem.disabled" *ngFor="let tabItem of tabItems.toArray()">
+    <a [class.active]="tabItem.active"
+      href="{{ tabItem.href ? tabItem.href : '#' + tabItem.link }}" target="{{ tabItem.target }}">
+      {{ tabItem.label }}
+    </a>
+  </li>
+</ul>
+<div>
+  <ng-content select="mz-tab-item"></ng-content>
+</div>