MaximBalaganskiy/index.html

## index.html
<!doctype html>
<html>

<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
	<div aurelia-app="src/configure">
		Loading...
	</div>

	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm_packages/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm.config.js"></script>
	<script>
		System.import("aurelia-bootstrapper");
	</script>
</body>

</html>

## src\app.html
<template>
	<style>
		div.button-row {
			padding: 5px 0;
		}
	</style>
	<div>
		<div class="button-row">
			<button md-button="disabled.bind: !firstButtonEnabled; flat.bind: !firstButtonRaised">
				<i class="left material-icons">mode_edit</i>I'm a basic button</button>
			<button md-button="flat: true;">I'm a flat button</button>
		</div>
		<div class="button-row">
			<button md-button="large: true;">I'm a large button</button>
			<button md-button="flat: true; large: true;">I'm a large flat button</button>
		</div>
		<div class="button-row">
			<button md-button="disabled: true;">I'm a basic disabled button</button>
			<button md-button="disabled: true; flat: true;">I'm a flat disabled button</button>
		</div>
		<div class="button-row">
			<button md-button class="primary">I'm a primary colored button</button>
		</div>
		<div class="button-row">
			<button md-button="flat: true;" class="primary-text">I'm a flat primary colored button</button>
		</div>
		<div class="actions">
			<hr /> First button:
			<md-switch label-on="enabled" label-off="disabled" checked.bind="firstButtonEnabled"></md-switch>
			<md-switch label-on="raised" label-off="flat" checked.bind="firstButtonRaised"></md-switch>
		</div>
	</div>
</template>

## src\app.ts
export class App {
	firstButtonEnabled = true;
	firstButtonRaised = true;
}

## src\configure.ts
export async function configure(aurelia) {
	await aurelia.loader.loadModule("materialize-css");
	aurelia.use
		.standardConfiguration()
		.developmentLogging()
		.plugin("aurelia-materialize-bridge", bridge => bridge.useAll())
		.plugin("aurelia-validation")
		.globalResources("src/shared/logger");

	await aurelia.start();
	aurelia.setRoot("src/app");
}
	<!doctype html>
	<html>

	<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	</head>

	<body>
	<div aurelia-app="src/configure">
	Loading...
	</div>

	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm_packages/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm.config.js"></script>
	<script>
	System.import("aurelia-bootstrapper");
	</script>
	</body>

	</html>
	<template>
	<style>
	div.button-row {
	padding: 5px 0;
	}
	</style>
	<div>
	<div class="button-row">
	<button md-button="disabled.bind: !firstButtonEnabled; flat.bind: !firstButtonRaised">
	<i class="left material-icons">mode_edit</i>I'm a basic button</button>
	<button md-button="flat: true;">I'm a flat button</button>
	</div>
	<div class="button-row">
	<button md-button="large: true;">I'm a large button</button>
	<button md-button="flat: true; large: true;">I'm a large flat button</button>
	</div>
	<div class="button-row">
	<button md-button="disabled: true;">I'm a basic disabled button</button>
	<button md-button="disabled: true; flat: true;">I'm a flat disabled button</button>
	</div>
	<div class="button-row">
	<button md-button class="primary">I'm a primary colored button</button>
	</div>
	<div class="button-row">
	<button md-button="flat: true;" class="primary-text">I'm a flat primary colored button</button>
	</div>
	<div class="actions">
	<hr /> First button:
	<md-switch label-on="enabled" label-off="disabled" checked.bind="firstButtonEnabled"></md-switch>
	<md-switch label-on="raised" label-off="flat" checked.bind="firstButtonRaised"></md-switch>
	</div>
	</div>
	</template>
	export class App {
	firstButtonEnabled = true;
	firstButtonRaised = true;
	}
	export async function configure(aurelia) {
	await aurelia.loader.loadModule("materialize-css");
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin("aurelia-materialize-bridge", bridge => bridge.useAll())
	.plugin("aurelia-validation")
	.globalResources("src/shared/logger");

	await aurelia.start();
	aurelia.setRoot("src/app");
	}