使用Angular2材質創建標籤

我想用Angular2創建垂直標籤我讀過這裏有一種方法可以使用Angular Material 那麼我需要如何將材質安裝到我現有的應用程序中，以及如何創建一個帶有該標籤的標籤一個組件？使用Angular2材質創建標籤

var isPublic = typeof window != "undefined"; 

/** 
* System configuration for Angular 2 samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': (isPublic) ? '/' : 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'client', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      // other libraries 
      'rxjs':      'npm:rxjs', 
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
      'angular2-jwt':    'npm:angular2-jwt/angular2-jwt.js', 
      'ng-semantic':    'npm:ng-semantic' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular2-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      }, 
      'ng-semantic': { 
       main: 'ng-semantic', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this);

來源

2016-10-03 Tony

您的意思是如何安裝材料npm包？根據他們的網站其

npm install --save @angular/material

那麼明顯app.module.ts運行npm install

使用該模塊：

import { MaterialModule } from '@angular/material'; 
// other imports 
@NgModule({ 
    imports: [MaterialModule.forRoot()], 
    ... 
}) 
export class AppModule { }

然後還有使用導航演示應用程序。我不打算在這裏發佈的所有代碼，因爲它是很多代碼，儘管我知道這很可能是最好的，因爲鏈路可以改變...

Materia Github demo app

但還有其他幾種解決方案在那裏爲好，如angular2-tabs似乎很簡單：

npm install angular2-tabs --save

HTML：

<an-tablist #list="anTabList" anListClass="diff-class"></an-tablist> 
<an-tabs [anList]="list"> 
    <div *anTabDefault="tabOne"> 
     The Contents of Tab one 
     <div anNextTab="hello">Next</div> 
    </div> 
    <div *anTab="'hello'"> 
     The Contents of Tab Two 
     <div [anNextTab]="tabOne"></div> 
    </div> 
</an-tabs>

控制器：

import {ANGULAR_TABS_DIRECTIVES, TabInterface} from "angular2-tabs/core"; 

@Component({ 
    ... 
    directives: [ANGULAR_TABS_DIRECTIVES] 
}) 
export class IndexComponent { 
    tabOne: TabInterface = {id: "test", title: 'test Title', canActivate:() => {return true;}} 
}

另一種解決方案： Plunker

來源

2016-10-27 10:24:24 Alex

使用Angular2材質創建標籤

回答

相關問題