cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(material): first ng2 material design components

Browse Source
This commit is contained in:
Jeremy Elbourn
2015-02-17 11:56:24 -08:00
committed by Yegor Jbanov
parent ffe13078e5
commit f149ae79c6
64 changed files with 4003 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
modules/examples/src/material/button/demo_app.html Normal file
View File

@ -0,0 +1,81 @@
<style>
section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px;
}
section [md-button]:not(.md-fab) {
min-width: 10em;
}
section [md-button] {
display: inline-block;
margin: 1em;
line-height: 25px;
}
.label {
position: absolute;
bottom: 5px;
left: 7px;
color: #ccc;
font-size: 14px;
}
</style>
<h1>Button demo</h1>
<p>
You just clicked: <span>{{previousClick}}</span>
</p>
<section>
<form (^submit)="submit('form submit')">
<button md-button>SUBMIT</button>
<button>Native button</button>
</form>
<span class="label">form submit</span>
</section>
<section>
<span class="label">Regular button</span>
<button md-button (^click)="click('button')">BUTTON</button>
<button md-button class="md-primary" (^click)="click('primary')">PRIMARY</button>
<button md-button disabled="disabled" (^click)="click('disabled')">DISABLED</button>
<button md-button class="md-accent" (^click)="click('accent')">ACCENT</button>
<button md-button class="md-warn" (^click)="click('warn')">WARN</button>
</section>
<section>
<span class="label">Raised button</span>
<button md-button class="md-raised" (^click)="click('raised')">BUTTON</button>
<button md-button class="md-raised md-primary" (^click)="click('raised primary')">PRIMARY</button>
<button md-button class="md-raised" disabled="disabled" (^click)="click('raised disabled')">DISABLED</button>
<button md-button class="md-raised md-accent" (^click)="click('raised accent')">ACCENT</button>
<button md-button class="md-raised md-warn" (^click)="click('raised warn')">WARN</button>
</section>
<section>
<span class="label">Fab button</span>
<button md-button class="md-fab" (^click)="click('fab')">BTN</button>
<button md-button class="md-fab md-primary" (^click)="click('fab primary')">PRMY</button>
<button md-button class="md-fab" disabled="disabled" (^click)="click('fab disabled')">DIS</button>
<button md-button class="md-fab md-accent" (^click)="click('fab accent')">ACC</button>
<button md-button class="md-fab md-warn" (^click)="click('fab warn')">WRN</button>
</section>
<section>
<span class="label">Anchor / hyperlink</span>
<a md-button href="http://google.com" target="_blank">HREF</a>
<a md-button href="http://google.com" disabled>DISABLED HREF</a>
<a md-button class="md-raised" target="_blank" href="http://google.com">RAISED HREF</a>
</section>
<p template="for #item of items">
Repeated button:
<button md-button tabindex="-1" (^click)="increment()">{{action}}</button>
{{clickCount}}
</p>

16
modules/examples/src/material/button/index.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ng-material button demo</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
<style> * { font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif; } </style>
</head>
<body>
<demo-app>Loading...</demo-app>
$SCRIPTS$
</body>
</html>

46
modules/examples/src/material/button/index.js Normal file
View File

@ -0,0 +1,46 @@
import {bootstrap, Component, View, MapWrapper, ListWrapper, For} from 'angular2/angular2';
import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdButton, MdAnchor, For]
})
class DemoApp {
previousClick: string;
action: string;
clickCount: number;
items: List<number>;
constructor() {
this.previousClick = 'Nothing';
this.action = "ACTIVATE";
this.clickCount = 0;
this.items = [1,2,3,4,5,6,7,8,9,0];
}
click(msg: string) {
this.previousClick = msg;
}
submit(msg: string, event) {
event.preventDefault();
this.previousClick = msg;
}
increment() {
this.clickCount++;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

9
modules/examples/src/material/checkbox/demo_app.html Normal file
View File

@ -0,0 +1,9 @@
<div md-theme="default">
<h2>Checkbox demo</h2>
<md-checkbox (^click)="increment()">Normal checkbox</md-checkbox>
<md-checkbox class="md-primary" (^click)="increment()">Primary checkbox</md-checkbox>
<md-checkbox disabled (^click)="increment()">Disabled checkbox</md-checkbox>
<p>Toggle count: {{toggleCount}}</p>
</div>

18
modules/examples/src/material/checkbox/index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ng-material checkbox demo</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
<style>
* {
font-family: RobotoDraft, Roboto;
}
</style>
</head>
<body>
$SCRIPTS$
<demo-app>Loading...</demo-app>
</body>
</html>

31
modules/examples/src/material/checkbox/index.js Normal file
View File

@ -0,0 +1,31 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdCheckbox} from 'angular2_material/src/components/checkbox/checkbox'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdCheckbox]
})
class DemoApp {
toggleCount: number;
constructor() {
this.toggleCount = 0;
}
increment() {
this.toggleCount++;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

71
modules/examples/src/material/demo_common.js Normal file
View File

@ -0,0 +1,71 @@
import {IMPLEMENTS, print} from 'angular2/src/facade/lang';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {isPresent, isBlank, RegExpWrapper, StringWrapper, BaseException} from 'angular2/src/facade/lang';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {Injectable} from 'angular2/di';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
import {reflector} from 'angular2/src/reflection/reflection';
import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
export function commonDemoSetup(): void {
BrowserDomAdapter.makeCurrent();
reflector.reflectionCapabilities = new ReflectionCapabilities();
}
@Injectable()
@IMPLEMENTS(UrlResolver)
export class DemoUrlResolver {
static a;
isInPubServe:boolean;
constructor() {
if (isBlank(UrlResolver.a)) {
UrlResolver.a = DOM.createElement('a');
}
this.isInPubServe = _isInPubServe();
}
resolve(baseUrl: string, url: string): string {
if (isBlank(baseUrl)) {
DOM.resolveAndSetHref(UrlResolver.a, url, null);
return DOM.getHref(UrlResolver.a);
}
if (isBlank(url) || url == '') return baseUrl;
if (url[0] == '/') {
throw new BaseException(`Could not resolve the url ${url} from ${baseUrl}`);
}
var m = RegExpWrapper.firstMatch(_schemeRe, url);
if (isPresent(m[1])) {
return url;
}
if (StringWrapper.startsWith(url, './')) {
return `${baseUrl}/${url}`;
}
if (this.isInPubServe) {
return `/packages/${url}`;
} else {
return `/${url}`;
}
}
}
var _schemeRe = RegExpWrapper.create('^([^:/?#]+:)?');
// TODO: remove this hack when http://dartbug.com/23128 is fixed
function _isInPubServe():boolean {
try {
int.parse('123');
print('>> Running in Dart');
return true;
} catch(_) {
print('>> Running in JS');
return false;
}
}

29
modules/examples/src/material/grid_list/demo_app.html Normal file
View File

@ -0,0 +1,29 @@
<style>@import "angular2_material/src/components/grid_list/grid-list.css";</style>
<style>
md-grid-tile {
background-color: lightblue;
}
</style>
<div>
<h2>grid-list demo</h2>
<md-grid-list cols="5" gutter-size="2em">
<md-grid-tile cols="5">
Tile #1
</md-grid-tile>
<md-grid-tile rowspan="2" colspan="2">
Tile #2
</md-grid-tile>
<md-grid-tile [rowspan]="tile3RowSpan" [colspan]="tile3RowSpan">
Tile #3
</md-grid-tile>
</md-grid-list>
</div>

20
modules/examples/src/material/grid_list/index.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ng-material grid-list demo</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
<style>
* {
font-family: RobotoDraft, Roboto;
}
</style>
</head>
<body>
$SCRIPTS$
<demo-app>Loading...</demo-app>
</body>
</html>

30
modules/examples/src/material/grid_list/index.js Normal file
View File

@ -0,0 +1,30 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdGridList, MdGridTile} from 'angular2_material/src/components/grid_list/grid_list'
import {MdTheme} from 'angular2_material/src/core/theme'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdGridList, MdGridTile]
})
class DemoApp {
tile3RowSpan: number;
tile3ColSpan: number;
constructor() {
this.tile3RowSpan = 3;
this.tile3ColSpan = 3;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

10
modules/examples/src/material/input/demo_app.html Normal file
View File

@ -0,0 +1,10 @@
<style>@import "angular2_material/src/components/input/input.css";</style>
<div md-theme="default">
<h2>input demo</h2>
<md-input-container>
<label>Name</label>
<input>
</md-input-container>
</div>

19
modules/examples/src/material/input/index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ng-material input demo</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
<style>
* {
font-family: RobotoDraft, Roboto;
}
</style>
</head>
<body>
$SCRIPTS$
<demo-app>Loading...</demo-app>
</body>
</html>

31
modules/examples/src/material/input/index.js Normal file
View File

@ -0,0 +1,31 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdCheckbox} from 'angular2_material/src/components/checkbox/checkbox'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdCheckbox]
})
class DemoApp {
toggleCount: number;
constructor() {
this.toggleCount = 0;
}
increment() {
this.toggleCount++;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

42
modules/examples/src/material/progress-linear/demo_app.html Normal file
View File

@ -0,0 +1,42 @@
<link>
<div style="width: 500px;">
<h2>Progress-linear demo</h2>
<p>
Determinate: primary
<md-progress-linear md-mode="determinate" [value]="progress" class="md-accent">
</md-progress-linear>
</p>
<p>
Determinate: accent
<md-progress-linear md-mode="determinate" [value]="progress" class="md-primary">
</md-progress-linear>
</p>
<p>
Buffer
<md-progress-linear md-mode="buffer"
[value]="progress" [buffer-value]="progress + (200 / progress)" class="md-warn">
</md-progress-linear>
</p>
<p>
Indeterminate
<md-progress-linear md-mode="indeterminate" class="md-primary">
</md-progress-linear>
</p>
<p>
Query
<md-progress-linear md-mode="query" class="md-accent">
</md-progress-linear>
</p>
<!--<md-progress-linear></md-progress-linear>-->
<p>Progress: {{progress}}</p>
<button type="button" (click)="step(10)">Increment</button>
<button type="button" (click)="step(-10)">Decrement</button>
</div>

18
modules/examples/src/material/progress-linear/index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ng-material progress-linear demo</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
<style>
* {
font-family: RobotoDraft, Roboto;
}
</style>
</head>
<body>
$SCRIPTS$
<demo-app>Loading...</demo-app>
</body>
</html>

31
modules/examples/src/material/progress-linear/index.js Normal file
View File

@ -0,0 +1,31 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdProgressLinear} from 'angular2_material/src/components/progress-linear/progress_linear'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdProgressLinear]
})
class DemoApp {
progress: number;
constructor() {
this.progress = 40;
}
step(s: number) {
this.progress += s;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

35
modules/examples/src/material/radio/demo_app.html Normal file
View File

@ -0,0 +1,35 @@
<div>
<h2>Radio buttons</h2>
<h3>Inside of a radiogroup</h3>
<md-radio-group #scifi (change)="onGroupChange()">
<md-radio-button value="star-wars">Star Wars</md-radio-button>
<md-radio-button value="star-trek" id="special-radio">Star Trek</md-radio-button>
<md-radio-button value="bsg" disabled>Battlestar Galactica</md-radio-button>
<md-radio-button [value]="thirdValue">Dr. Who</md-radio-button>
</md-radio-group>
<p>Your selection: {{scifi.value}}</p>
<p>radio group value change count: {{groupValueChangeCount}}</p>
<hr>
<h3>Standalone</h3>
<md-radio-button name="element" (^click)="onIndividualClick()">Earth</md-radio-button>
<md-radio-button name="element" (^click)="onIndividualClick()">Fire</md-radio-button>
<md-radio-button name="element" (^click)="onIndividualClick()">Wind</md-radio-button>
<md-radio-button name="element" (^click)="onIndividualClick()" disabled>Heart (disabled)</md-radio-button>
<p>individual radio value change count: {{individualValueChanges}}</p>
<hr>
<h3>Disabled radio group</h3>
<p>Chosen: {{pokemon}}</p>
<md-radio-group disabled [value]="pokemon">
<md-radio-button value="fire">Charmander</md-radio-button>
<md-radio-button value="leaf">Bulbasaur</md-radio-button>
<md-radio-button value="water">Squirtle</md-radio-button>
</md-radio-group>
<button type="button" (click)="chooseCharmander()">Choose Charmander</button>
</div>

20
modules/examples/src/material/radio/index.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ng-material radio demo</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
<style>
* {
font-family: RobotoDraft, Roboto;
}
</style>
</head>
<body>
$SCRIPTS$
<demo-app>Loading...</demo-app>
</body>
</html>

49
modules/examples/src/material/radio/index.js Normal file
View File

@ -0,0 +1,49 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdRadioButton, MdRadioGroup} from 'angular2_material/src/components/radio/radio_button'
import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({
selector: 'demo-app',
injectables: [MdRadioDispatcher]
})
@View({
templateUrl: './demo_app.html',
directives: [MdRadioGroup, MdRadioButton]
})
class DemoApp {
thirdValue;
groupValueChangeCount;
individualValueChanges;
pokemon;
someTabindex;
constructor() {
this.thirdValue = 'dr-who';
this.groupValueChangeCount = 0;
this.individualValueChanges = 0;
this.pokemon = '';
this.someTabindex = 888;
}
chooseCharmander() {
this.pokemon = 'fire';
}
onGroupChange() {
this.groupValueChangeCount++;
}
onIndividualClick() {
this.individualValueChanges++;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}

9
modules/examples/src/material/switcher/demo_app.html Normal file
View File

@ -0,0 +1,9 @@
<div md-theme="default">
<h2>Switch demo</h2>
<md-switch (^click)="increment()">Normal switch</md-switch>
<md-switch class="md-primary" (^click)="increment()">Primary switch</md-switch>
<md-switch disabled (^click)="increment()">Disabled switch</md-switch>
<p>Toggle count: {{toggleCount}}</p>
</div>

19
modules/examples/src/material/switcher/index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ng-material switch demo</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic">
<style>
* {
font-family: RobotoDraft, Roboto;
}
</style>
</head>
<body>
$SCRIPTS$
<demo-app>Loading...</demo-app>
</body>
</html>

31
modules/examples/src/material/switcher/index.js Normal file
View File

@ -0,0 +1,31 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {MdSwitch} from 'angular2_material/src/components/switcher/switch'
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
import {bind} from 'angular2/di';
@Component({
selector: 'demo-app'
})
@View({
templateUrl: './demo_app.html',
directives: [MdSwitch]
})
class DemoApp {
toggleCount: number;
constructor() {
this.toggleCount = 0;
}
increment() {
this.toggleCount++;
}
}
export function main() {
commonDemoSetup();
bootstrap(DemoApp, [
bind(UrlResolver).toValue(new DemoUrlResolver())
]);
}