Last active
September 20, 2017 13:23
-
-
Save kirakishin/2f791c2185927f2c1068dedc12b87b9a to your computer and use it in GitHub Desktop.
Test material buttons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Angular Material Plunker</title> | |
<!-- Load common libraries --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.1/typescript.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.5/zone.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> | |
<!-- Configure SystemJS --> | |
<script src="systemjs.config.js"></script> | |
<script> | |
System | |
.import('main.ts') | |
.catch(console.error.bind(console)); | |
</script> | |
<!-- Load the Angular Material stylesheet --> | |
<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> | |
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
<style>body { font-family: Roboto, Arial, sans-serif; }</style> | |
</head> | |
<body> | |
<button-types-example>Loading Material Docs example...</button-types-example> | |
</body> | |
</html> | |
<!-- Copyright 2017 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; | |
import {BrowserModule} from '@angular/platform-browser'; | |
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; | |
import {NgModule} from '@angular/core'; | |
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; | |
import { | |
MdAutocompleteModule, | |
MdButtonModule, | |
MdButtonToggleModule, | |
MdCardModule, | |
MdCheckboxModule, | |
MdChipsModule, | |
MdCoreModule, | |
MdDatepickerModule, | |
MdDialogModule, | |
MdExpansionModule, | |
MdGridListModule, | |
MdIconModule, | |
MdInputModule, | |
MdListModule, | |
MdMenuModule, | |
MdNativeDateModule, | |
MdPaginatorModule, | |
MdProgressBarModule, | |
MdProgressSpinnerModule, | |
MdRadioModule, | |
MdRippleModule, | |
MdSelectModule, | |
MdSidenavModule, | |
MdSliderModule, | |
MdSlideToggleModule, | |
MdSnackBarModule, | |
MdSortModule, | |
MdTableModule, | |
MdTabsModule, | |
MdToolbarModule, | |
MdTooltipModule, | |
} from '@angular/material'; | |
import {ButtonTypesExample} from './button-types-example'; | |
import {HttpModule} from '@angular/http'; | |
import {CdkTableModule} from '@angular/cdk/table'; | |
@NgModule({ | |
exports: [ | |
CdkTableModule, | |
MdAutocompleteModule, | |
MdButtonModule, | |
MdButtonToggleModule, | |
MdCardModule, | |
MdCheckboxModule, | |
MdChipsModule, | |
MdCoreModule, | |
MdDatepickerModule, | |
MdDialogModule, | |
MdExpansionModule, | |
MdGridListModule, | |
MdIconModule, | |
MdInputModule, | |
MdListModule, | |
MdMenuModule, | |
MdNativeDateModule, | |
MdPaginatorModule, | |
MdProgressBarModule, | |
MdProgressSpinnerModule, | |
MdRadioModule, | |
MdRippleModule, | |
MdSelectModule, | |
MdSidenavModule, | |
MdSliderModule, | |
MdSlideToggleModule, | |
MdSnackBarModule, | |
MdSortModule, | |
MdTableModule, | |
MdTabsModule, | |
MdToolbarModule, | |
MdTooltipModule, | |
] | |
}) | |
export class PlunkerMaterialModule {} | |
@NgModule({ | |
imports: [ | |
BrowserModule, | |
BrowserAnimationsModule, | |
FormsModule, | |
HttpModule, | |
PlunkerMaterialModule, | |
MdNativeDateModule, | |
ReactiveFormsModule, | |
], | |
declarations: [ButtonTypesExample], | |
bootstrap: [ButtonTypesExample], | |
providers: [] | |
}) | |
export class PlunkerAppModule {} | |
platformBrowserDynamic().bootstrapModule(PlunkerAppModule); | |
/** Copyright 2017 Google Inc. All Rights Reserved. | |
Use of this source code is governed by an MIT-style license that | |
can be found in the LICENSE file at http://angular.io/license */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** Add Transpiler for Typescript */ | |
System.config({ | |
transpiler: 'typescript', | |
typescriptOptions: { | |
emitDecoratorMetadata: true | |
}, | |
packages: { | |
'.': { | |
defaultExtension: 'ts' | |
}, | |
'vendor': { | |
defaultExtension: 'js' | |
} | |
} | |
}); | |
System.config({ | |
map: { | |
'main': 'main.js', | |
// Angular specific mappings. | |
'@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js', | |
'@angular/animations': 'https://unpkg.com/@angular/animations/bundles/animations.umd.js', | |
'@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js', | |
'@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js', | |
'@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js', | |
'@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js', | |
'@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js', | |
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js', | |
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', | |
'@angular/animations/browser': 'https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js', | |
'@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser-animations.umd.js', | |
'@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js', | |
'@angular/cdk': 'https://unpkg.com/@angular/cdk/bundles/cdk.umd.js', | |
'@angular/cdk/a11y': 'https://unpkg.com/@angular/cdk/bundles/cdk-a11y.umd.js', | |
'@angular/cdk/bidi': 'https://unpkg.com/@angular/cdk/bundles/cdk-bidi.umd.js', | |
'@angular/cdk/coercion': 'https://unpkg.com/@angular/cdk/bundles/cdk-coercion.umd.js', | |
'@angular/cdk/collections': 'https://unpkg.com/@angular/cdk/bundles/cdk-collections.umd.js', | |
'@angular/cdk/keycodes': 'https://unpkg.com/@angular/cdk/bundles/cdk-keycodes.umd.js', | |
'@angular/cdk/observers': 'https://unpkg.com/@angular/cdk/bundles/cdk-observers.umd.js', | |
'@angular/cdk/overlay': 'https://unpkg.com/@angular/cdk/bundles/cdk-overlay.umd.js', | |
'@angular/cdk/platform': 'https://unpkg.com/@angular/cdk/bundles/cdk-platform.umd.js', | |
'@angular/cdk/portal': 'https://unpkg.com/@angular/cdk/bundles/cdk-portal.umd.js', | |
'@angular/cdk/rxjs': 'https://unpkg.com/@angular/cdk/bundles/cdk-rxjs.umd.js', | |
'@angular/cdk/scrolling': 'https://unpkg.com/@angular/cdk/bundles/cdk-scrolling.umd.js', | |
'@angular/cdk/table': 'https://unpkg.com/@angular/cdk/bundles/cdk-table.umd.js', | |
// Rxjs mapping | |
'rxjs': 'https://unpkg.com/rxjs', | |
}, | |
packages: { | |
// Thirdparty barrels. | |
'rxjs': { main: 'index' }, | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment